Question

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

的按钮显示手动切换

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

如果我尝试这样做： Component.html

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

Component.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中访问此下拉列表

Answer 1

您需要将模板变量添加到下拉指令#dropdown="bs-dropdown"中，并且该变量将在模板中起作用，但是如果您需要通过组件代码管理下拉状态，则必须使用@ViewChild来获取下拉菜单的引用，看起来会像这样@ViewChild('dropdown') dropdown: BsDropdownDirective;

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

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

1 个答案: