6

angular2 ng-bootstrap 下拉下拉组件

有人可以帮我找出如何将 angular2 组件与下拉列表绑定并调用打开或关闭方法..

他们没有太多的文档。

4

5 回答 5

15

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

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

[...]

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

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

您可以在官方文档中阅读更多关于 ViewChild 的信息：组件交互 | 查看孩子。

于 2016-09-20T21:31:02.557 回答
13

实现这一点的最简单方法是使用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和。您可以按如下方式调用它们（例如从“外部”打开下拉菜单）：toggleisOpen

<button (click)="myDrop.open()">
于 2016-09-21T07:54:32.560 回答
6

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();
}
于 2020-05-11T23:56:52.283 回答
2

我尝试了上述方法，但它似乎没有做任何事情，所以我做了一些试验和错误，发现为什么当我打电话时myDrop.open()什么也没发生。您必须将[autoClose]="false"具有下拉引用的元素添加到您的元素中。

<div ngbDropdown #myDrop="ngbDropdown" [autoClose]="false">
  <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

 //Somewhere else
<button (click)="myDrop.open()"> // or pass the reference as a parameter to call it 
                                    in a function.
于 2019-04-10T10:48:54.617 回答
1

如果您需要将 ngbDropdown 实例传递给另一个组件，如上所述，将该实例定义为模板引用变量#myDrop="ngbDropdown"，然后在要使用 Input 装饰器访问该下拉实例的组件上声明一个属性，例如

@Component({
  selector: 'my-component',
  template: `<button (click)=closeMyDrop()">Close myDrop</button>`
})
export class MyComponent {
    @Input() myDrop;
    closeMyDrop(){
       this.myDrop.close();
    }
}

然后在使用子组件的父组件中，定义myDrop模板引用变量的属性，例如：

<my-component [myDrop]="myDrop"></my-component>

Angular 2 模板引用变量的文档

Angular 2 使用输入绑定将数据从父级传递给子级的文档

于 2016-10-10T16:51:11.273 回答