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

Question

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

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

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

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

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

Answer 1

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

您可以对 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

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

trigger ng-bootstrap accordion component with typescript(javascript)?

twitter-bootstrap

typescript

ng-bootstrap

angular