Angular Material 2 MatMenu - 动态创建

# 使用 Angular Material 2 动态创建 MatMenu

typescript
// app.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';
import { MyDynamicMenuComponent } from './my-dynamic-menu/my-dynamic-menu.component';
@Component({
  selector: 'app-root',
  template: `
    Open Dynamic Menu
    
  `,
  styles: []
})
export class AppComponent {
  @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
  openDynamicMenu() {
    // 创建动态组件
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyDynamicMenuComponent);
    const componentRef = componentFactory.create(this.viewContainerRef.injector);
    // 将动态组件添加到视图中
    this.viewContainerRef.insert(componentRef.hostView);
    // 打开 MatMenu
    this.menuTrigger.openMenu();
  }
}

typescript
// my-dynamic-menu.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-my-dynamic-menu',
  template: `
    
      Menu Item
      
    
  `,
  styles: []
})
export class MyDynamicMenuComponent {
  menuItemClicked() {
    console.log('Menu item clicked!');
  }
}