ng-bootstrap示例从组件调用方法

Question

angular2 ng-bootstrap下拉下拉组件

有人可以帮我找出如何用下拉键绑定angular2组件并调用open或close方法.

他们没有太多文件.

Answer 1

您可以使用ViewChild装饰器。在父组件中，它看起来应该像这样：

import 'ViewChild' from '@angular/core'
import 'NgbDropdown' from '...';

[...]

export class ParentComponent {
  @ViewChild(NgbDropdown)
  private dropdown: NgbDropdown;

  closeDropdown() {
    this.dropdown.close();
  }
}

您可以在官方文档中了解有关ViewChild的更多信息：组件交互| ViewChild。

Answer 2

实现此目的的最简单方法是使用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()">

Answer 3

HTML

<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" (click)="closeDropdown()">Close Dropdown</button>
    </div>
</div>

角

确保导入 ViewChild 和 NgbDropdown

import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import { ViewChild } from '@angular/core';

@ViewChild('myDrop', { static: true }) myDrop: NgbDropdown;

closeDropdown() {
   this.myDrop.close();
}