Angular PrimeNG Accordion程序化控制

Angular PrimeNG是PrimeTek建立的一个UI组件库，用于帮助Angular开发者在更短的时间内简化开发一致的、可扩展的Web界面的过程。在这篇文章中，我们将讨论Angular PrimeNG中的Accordion Programmatic Control。

Accordion组件是用来显示标签集合中的内容。手风琴的标签可以通过点击手风琴标签的标题来打开和关闭，但这也可以通过修改手风琴组件的activeIndex数组来以编程方式控制。

Angular PrimeNG Accordion程序化控制属性：

multiple: 当这个属性为真时，一次可以打开多个手风琴标签。
activeIndex。它是活动标签的索引，或者是一个索引数组，用于以编程方式改变选定的标签。

Angular PrimeNG Accordion Programmatic Control AccordionTab 属性：

disabled:这个属性可以被设置为 “真”，以禁用特定的手风琴标签。

语法:

**// File Name: app.component.html**

<button 
    pButton 
    type="button" 
    label="..." 
    (click)="toggleTab(index)">
</button>

<p-accordion [multiple]="true">
    <p-accordionTab 
        header="..." 
        [(selected)]="activeTabs[0]">
        ...
    </p-accordionTab>
    <p-accordionTab 
        header="..." 
        [(selected)]="activeTabs[1]">
        ...
    </p-accordionTab>
</p-accordion>

**// File Name: app.component.ts**

toggleTab(idx: number)
{
    this.activeTabs[idx] = !this.activeTabs[idx];
}

创建应用程序并安装所需模块：

第1步：使用以下命令创建Angular应用程序。

ng new my_app

第2步：创建应用程序后，使用下面写的命令移动到项目文件夹。

cd new_app

第3步：最后，在你的项目目录中安装以下模块

npm install primeng --save
npm install primeicons --save

项目结构：现在，项目结构将如下图所示。

Angular PrimeNG Accordion程序化控制

Project Structure

例子1：在这个例子中，我们用按钮以编程方式切换手风琴标签。

app.component.html:

<div style="width: 400px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Accordion 
        Programmatic Control
    </h4>
  
    <div class="mb-4">
        <button 
            pButton 
            type="button" 
            class="mr-3" 
            label="Toggle Tab 1" 
            (click)="toggleTab(0)">
        </button>
  
        <button 
            pButton 
            type="button" 
            label="Toggle Tab 2" 
            (click)="toggleTab(1)">
        </button>
    </div>
  
    <p-accordion [multiple]="true">
        <p-accordionTab 
            header="AccordionTab 1 Header" 
            [(selected)]="activeTabs[0]">
            This is the content of the Accordion Tab 1.
        </p-accordionTab>
        <p-accordionTab 
            header="AccordionTab 2 Header" 
            [(selected)]="activeTabs[1]">
            This is the content of the Accordion Tab 2.
        </p-accordionTab>
    </p-accordion>
</div>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent {
    activeTabs: boolean[] = [false, false];
  
    toggleTab(idx: number)
    {
        this.activeTabs[idx] = 
            !this.activeTabs[idx];
    }
}

app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { AccordionModule } from "primeng/accordion";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        ButtonModule,
        AccordionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Accordion程序化控制

例子2：禁用属性设置为 “true “的手风琴标签，即使被禁用，也可以通过编程来切换。

app.component.html:

<div style="width: 400px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Accordion 
        Programmatic Control
    </h4>
  
    <div class="mb-4">
        <button 
            pButton 
            type="button" 
            label="Toggle The Disabled Tab" 
            (click)="toggleTab(1)">
        </button>
    </div>
  
    <p-accordion [multiple]="true">
        <p-accordionTab 
            header="Active Accordion Tab" 
            [(selected)]="activeTabs[0]">
            This is the content of the Active Accordion Tab.
        </p-accordionTab>
        <p-accordionTab 
            header="Disabled Accordion Tab"
            [disabled]="true" 
            [(selected)]="activeTabs[1]">
            This is the content of the Disabled Tab.
        </p-accordionTab>
    </p-accordion>
</div>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent {
    activeTabs: boolean[] = [false, false];
  
    toggleTab(idx: number) {
        this.activeTabs[idx] = 
            !this.activeTabs[idx];
    }
}

app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { AccordionModule } from "primeng/accordion";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        ButtonModule,
        AccordionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Accordion程序化控制