多Angular CDK菜单场景下如何程序化打开指定菜单

同一文件中定义两个Angular CDK菜单时，默认@ViewChild(CdkMenuTrigger)会获取到Menu 1的触发器。要获取并程序化控制Menu 2的触发器，可按以下两种方式实现：

方式一：通过模板引用变量获取已存在的触发器 #

1. 修改模板代码，给Menu 2的触发器按钮添加引用变量 #

在Menu 2的触发按钮上添加#menu2Trigger模板引用变量，明确标记要获取的触发器：

<button #menu2Trigger [cdkMenuTriggerFor]="menu2" class="example-standalone-trigger">Click me!</button>

<ng-template #menu2>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Menu Item1</button>
    <button class="example-menu-item" cdkMenuItem>Menu Item2</button>
    <button class="example-menu-item" cdkMenuItem>Menu Item3</button>
    <button class="example-menu-item" cdkMenuItem>Menu Item4</button>
  </div>
</ng-template>

2. 在组件类中获取并控制触发器 #

导入CdkMenuTrigger后，通过@ViewChild指定模板引用变量名称，精准获取Menu 2的触发器，之后就能调用open()/close()等方法程序化控制菜单：

import { Component, ViewChild } from '@angular/core';
import { CdkMenuTrigger } from '@angular/cdk/menu';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 精准获取Menu 2的触发器
  @ViewChild('menu2Trigger') menu2Trigger!: CdkMenuTrigger;

  // 程序化打开Menu 2
  openMenu2() {
    this.menu2Trigger.open();
  }

  // 程序化关闭Menu 2
  closeMenu2() {
    this.menu2Trigger.close();
  }
}

方式二：完全程序化创建触发器（无模板触发按钮） #

如果不需要依赖模板中的触发按钮，可直接在组件类中实例化CdkMenuTrigger并关联Menu 2的模板：

1. 组件类实现代码 #

import { Component, ViewChild, TemplateRef, AfterViewInit, ElementRef } from '@angular/core';
import { CdkMenuTrigger } from '@angular/cdk/menu';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  // 获取Menu 2的模板
  @ViewChild('menu2') menu2Template!: TemplateRef<any>;
  private menu2Trigger!: CdkMenuTrigger;

  ngAfterViewInit() {
    // 实例化触发器
    this.menu2Trigger = new CdkMenuTrigger();
    // 关联Menu 2的模板
    this.menu2Trigger.menuTemplate = this.menu2Template;
    // 可选：指定触发器附着的DOM元素（比如页面中的某个按钮或容器）
    // this.menu2Trigger.elementRef = new ElementRef(document.getElementById('target-element'));
  }

  // 程序化打开Menu 2，可自定义坐标位置
  openMenu2() {
    this.menu2Trigger.open({
      x: 200,
      y: 150
    });
  }
}

内容的提问来源于stack exchange，提问作者arun