Question

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

我有＆＃39;手风琴＆＃39;我的应用程序中多个位置的组件，在某些情况下，我需要在打字稿中触发手风琴打开状态。

从accordion component API documentation我发现以下方法，但据我所知，只有在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 / StrongCat属性由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

使用typescript（javascript）触发ng-bootstrap手风琴组件？

1 个答案: