angular - コンポーネントからメソッドを呼び出すng-bootstrapの例

Question

angular2 ng-bootstrap ドロップダウンドロップダウン コンポーネント

angular2コンポーネントをドロップダウンでバインドし、openまたはcloseメソッドを呼び出す方法を見つけるのを手伝ってくれる人がいます..

ドキュメントはあまりありません。

Answer 1

NgbDropdownこれを実現する最も簡単な方法は、ディレクティブのエクスポートされたインスタンスを使用することです。次のように実行できます (注意#myDrop="ngbDropdown"):

<div ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownMenu3" ngbDropdownToggle>Toggle</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu3">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

上記を実行するとすぐに、ディレクティブ インスタンスで文書化された ( https://ng-bootstrap.github.io/#/components/dropdown ) メソッドを呼び出すことができます。NgbDropdown利用可能なメソッドはopen、 、close、toggleおよびisOpenです。次のように呼び出すことができます (「外部」からドロップダウンを開く例)。

<button (click)="myDrop.open()">