如何在 Angular 2.0 中以编程方式触发 PrimeNG Accordion Click？

Question

我有一个如下所示的手风琴。

当点击链接时，我需要触发所有 p-accordianTab 元素的点击事件。

这怎么可能？

<a (click)="openCloseAll()" >{{openCloseAllText}} all</a>
                <p-accordion [multiple]="true">
                    <div class="row" *ngFor="let category of result.Categories">                        

                            <p-accordionTab #accordianTab header="{{category.Name}}">

                            </p-accordionTab>                       

                    </div>
                </p-accordion>

我尝试将此“#accordionTab”添加到元素并从 TypeScript 访问它，但不起作用：

@ViewChild('accordionTab') accordionTab: ElementRef;
 openCloseAllText: string = "Open";
 openCloseAll() {
        // get all accordions and click them
        this.openCloseAllText = this.openCloseAllText === "Open" ? "Close" : "Open";
        this.accordionTab.nativeElement.click();
    }

TypeError: Cannot read property 'nativeElement' of undefined

Answer 1

为什么不直接使用手风琴本身的 tabs 属性？

<p-accordion #accordion>
    <p-accordionTab header="Header Content">
         Body Content
    </p-accordionTab>
</p-accordion>

@ViewChild('accordion') accordion: Accordion;

closeAllAccordionTabs() {
    if(!isNullOrUndefined(this.accordion.tabs)){
        for(let tab of this.accordion.tabs) {
            if(tab.selected) tab.selected = false;
        }
    }
}

openAllAccordionTabs() {
    if(!isNullOrUndefined(this.accordion.tabs)){
        for(let tab of this.accordion.tabs) {
            if(!tab.selected) tab.selected = true;
        }
    }
}

Answer 2

我能够使用与您相同的方法来完成这项工作，但将模板变量移动到自定义 p-header 内的元素，而不是 p-accordion-Tab 上。

<p-accordionTab>
    <p-header>
        <span #header>
            Header Content
        </span>
    </p-header>
    Body Content
</p-accordionTab>

他们的文档页面底部有关于使用自定义标题内容的信息：https://www.primefaces.org/primeng/#/accordion

Answer 3

为带有箭头功能的 es6 更新了 Martin Kronstad's answer：

  closeAllAccordionTabs() {
    if (this.accordion && this.accordion.tabs) {
      this.accordion.tabs.forEach(tab => tab.selected = false);
    }
  }

Answer 4

这是一个不需要@ViewChild 的替代方法。如果您的手风琴在 *ngIf 中并且仅在某些条件下添加到 DOM 中，请使用此选项（在这种情况下，@ViewChild 未定义且无法设置）。

使用 activeIndex 属性：

<p-accordion [activeIndex]="openAccordion">

将此变量放入组件中：

openAccordion = -1;

当您想要打开手风琴时，请将 this.openAccordion 设置为您想要打开的手风琴选项卡的索引。例如

this.openAccordion = 0;

或者在我使用它的单元测试中：

fixture.componentInstance.openAccordion = 0;

Answer 5

你可以在 HTML 中做这样的事情

<p-accordion (onOpen)='onTabOpen($event)'>
<p-accordionTab *ngFor='let chart of chartList' header='{{chart.chartName}}'>
<div *ngFor='let content of chartContentList'>{{content.referenceName}}</div>
</p-accordionTab>
</p-accordion>

在 Typescript 中，编写 onTabOpen 事件处理程序

chartList: ChartModel[]=[];
chartContentList: ChartContentModel[]=[];

onTabOpen(e){
const index=e.index
const contentList=this.chartList.filter(x=>x.id==index);
this.service.getChartContent(contentList[0].chartName).subscribe((res)=>{
if(res){
this.chartContentList=res;
}
});
}

因此，当您单击任何标题选项卡时，它会将索引传递给 OnTabOpen 处理程序，然后它会获取要在选项卡下加载的内容并动态绑定它。

查看模型：

public interface ChartModel{
id?:number;
chartName?:string;
}

public interface ChartContentModel{
referenceName?:string;
}

Answer 6

您可以使用 p-accordion 的 selected 属性：

<a (click)="openCloseAll()" >{{openCloseAllText}} all</a>
<p-accordion [multiple]="true" [seleted]="accordionTrigger">
    <div class="row" *ngFor="let category of result.Categories">                        
        <p-accordionTab #accordianTab header="{{category.Name}}">
        </p-accordionTab>                       
    </div>
</p-accordion>

accordionTrigger: boolean = false;    // false is closed and true is opened

changeAccordion() {
    this.accordionTrigger = !this.accordionTrigger;
}

如果你有很多手风琴，你可以做一个布尔数组并为每个手风琴设置一个 id。