如何从组件内触发下拉菜单答案

【问题标题】：How can I trigger the dropdown from within a component如何从组件内触发下拉菜单
【发布时间】：2019-05-27 15:25:17
【问题描述】：

我正在构建一个 Angular 应用程序，用户应该能够在其中右键单击画布（这涵盖了大部分页面）并查看上下文菜单。我一直在为应用程序的主菜单使用 ngx-bootstrap 下拉菜单，并希望在此上下文菜单中使用相同的模块。此下拉菜单的演示显示了使用带有

的按钮的手动切换

<button type="button" class="btn btn-primary" (onclick)="dropdown.toggle(true);">Toggle</button>

如果我试试这个：组件.html

<div id="canvas" (contextmenu)="handleRightClick($event)">
</div>

组件.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent {
    constructor() {
    }
    handleRightClick(e) {
        dropdown.toggle(true);
    }
}

右键单击画布时出现错误：

ReferenceError: dropdown is not defined

我得到错误的事实并不让我感到惊讶。我没有在任何地方声明这个“下拉”变量。我的问题是：如何从 Component.ts 访问此下拉列表

【问题讨论】：

标签： dropdown ngx-bootstrap

【解决方案1】：

您需要在下拉指令#dropdown="bs-dropdown" 中添加一个模板变量，该变量将在模板中工作，但是如果您需要从组件的代码中管理下拉列表的状态，您必须使用@ViewChild 来获取对下拉列表，它看起来有点像@ViewChild('dropdown') dropdown: BsDropdownDirective;

这是一个例子 - https://stackblitz.com/edit/angular-gnvgjn

【讨论】：