angular - 使用 typescript (javascript)触发 ng-bootstrap Accordion 组件？

Question

我正在使用 ng-bootstrap framework在我的 Angular 4 项目中。

我的应用程序中的多个位置都有“ Accordion ”组件，在某些情况下，我需要在 typescript 中触发 Accordion 打开状态。

来自accordion component API documentation我找到了以下方法，但据我所知，它仅在 html 文件中调用时有效(尝试从构造函数调用)。

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

是否也可以在 typescript 中触发？ 如果有人对此有经验，我将非常感激。否则我需要构建自己的自定义 Accordion 。

Answer 1

为此，您必须使用带有 NgbAccordion 组件的强类型 ViewChild。

您可以对 ng-boostrap 的任何组件和任何子组件的任何公共(public)方法执行相同的操作。

要遵循的步骤:

1/将#someIdentifier 添加到 html 端的组件标签中。

2/使用@ViewChild('someIdentifier') 引用您的component.ts

3/通过 ComponentType StrongCast 你的属性。

4/从您的子组件中享受任何公共(public)方法。

下面的例子:

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