使用typescript(javascript)触发ng-bootstrap手风琴组件？

Question

我在Angular 4项目中使用ng-bootstrap框架.

我的应用程序中有多个位置的'accordion'组件,在某些情况下我需要在打字稿中触发手风琴打开状态.

从手风琴组件API文档中我发现了以下方法,但据我所知,它仅在html文件中调用时(尝试从构造函数调用).

//Programmatically toggle a panel with a given id.
toggle(panelId: string) => void

是否也可以触发打字稿？如果有人有经验,我会非常感激.否则我需要建立自己的定制手风琴.

Answer 1

为此,你必须使用ViewChild强类型NgbAccordion组件.

您可以使用ng-boostrap的任何组件和任何子组件的任何公共方法执行相同的操作.

步骤如下:

1 /将#someIdentifier添加到html端的组件标记中.

2 /用于@ViewChild('someIdentifier')参考你的component.ts

3/Strong通过ComponentType获取您的属性.

4 /从您的子组件中享受任何公共方法.

以下示例:

import {Component, ViewChild} from '@angular/core';
import {NgbAccordion} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'ngbd-accordion-toggle',
  templateUrl: './accordion-toggle.html'
})
export class NgbdAccordionToggle {
  @ViewChild('acc') accordionComponent: NgbAccordion;

  // Method call on click.
  toggle(id:string): void {
  //Here you have access to AccordionComponent as discribe on documentation.    
    this.accordionComponent.toggle(id);
  }
}

Html方面:

<ngb-accordion #acc="ngbAccordion">
// [...]
</ngb-accordion>

实例:https://stackblitz.com/edit/angular-szhpdw？file = app%2Faccordion-toggle.ts