angular - 使用变量将 mat-menu 元素指定为 [matMenuTriggerFor]？

Question

我是一名 Angular 新手，尝试使用 Material 2 实现表驱动的级联菜单，但当我尝试使用变量将 mat-menu 元素名称的值分配给 [matMenuTriggerFor] 时，出现运行时错误。我找到的所有示例都使用文本字符串来指定 mat-menu 元素名称；我无法在网络上的任何地方找到表明其他人遇到类似问题的帖子，尽管我确实在 github 上找到了几个月前的帖子，报告为绑定(bind)到 [matMenuTriggerFor] 不起作用的错误，但它已被关闭作为与 Material 版本 4.x.x 相关的问题。看来 [matMenuTriggerFor] 需要表达式的值，但我的尝试不起作用。我做错了什么？

我使用的是 Win 10，浏览器是 Firefox 57.0.2

我的 Angular 版本:

Angular CLI: 1.5.0
Node: 6.11.3
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.2
@angular/cli: 1.5.0
@angular/material: 5.0.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1

我的app.module.ts:

import { BrowserModule }            from '@angular/platform-browser';
import { NgModule }                 from '@angular/core';
import { BrowserAnimationsModule }  from '@angular/platform-browser/animations';
import { MatMenuModule }            from '@angular/material/menu';
import { MatToolbarModule }         from '@angular/material/toolbar';
import { MatIconModule }            from '@angular/material/icon';
import { MatListModule }            from '@angular/material/list';


import { AppComponent }             from './app.component';
import { NestedMenusComponent }     from './nested-menus/nested-menus.component';

@NgModule({
  declarations: [
    AppComponent,
    NestedMenusComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的组件.ts:

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

@Component({
  selector: 'app-nested-menus',
  templateUrl: './nested-menus.component.html',
  styleUrls: ['./nested-menus.component.scss']
})
export class NestedMenusComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

  selected :string;
  menuItems = [
    {text: "Tabledriven.Item1" },
    {text: "Tabledriven.Item2", templateName: "submenu"},
  ];

  select(pText :string)
  {
    this.selected = pText;
  }
}

我的组件.html:

<div>
  <p>You selected: {{ selected }}</p>

  <div class="demo-menu">
    <div class="menu-section">
      <p>Basic Menu</p>
      <mat-toolbar>
        <button mat-icon-button [matMenuTriggerFor]="basic">
          <mat-icon>more_vert</mat-icon>
        </button>
      </mat-toolbar>

      <mat-menu #basic="matMenu">
        <button mat-menu-item  (click)="select('Basic.Item1')">Basic.Item1</button>
        <button mat-menu-item [matMenuTriggerFor]="submenu">Basic.Item2</button>
      </mat-menu>
    </div>

    <div class="menu-section">
      <p>Table-driven Menu</p>
      <mat-toolbar>
        <button mat-icon-button [matMenuTriggerFor]="tabledriven">
          <mat-icon>more_vert</mat-icon>
        </button>
      </mat-toolbar>

      <mat-menu #tabledriven="matMenu">
        <ng-container *ngFor="let item of menuItems">
          <button *ngIf=!item.templateName mat-menu-item (click)="select(item.text)">{{ item.text }}</button>
          <button *ngIf=item.templateName  mat-menu-item [matMenuTriggerFor]=item.templateName>{{ item.text }}</button>
        </ng-container>
      </mat-menu>
    </div>

    <mat-menu #submenu="matMenu">
      <button mat-menu-item (click)="select('Submenu.Item1')">Submenu.Item1</button>
      <button mat-menu-item (click)="select('Submenu.Item2')">Submenu.Item2</button>
    </mat-menu>
  </div>
</div>

表格驱动的菜单在任何用户输入之前抛出运行时错误:

ERROR 
TypeError: this.menu.close is undefined
Stack trace:
MatMenuTrigger.prototype.ngAfterContentInit@webpack-internal:///../../../material/esm5/menu.es5.js:771:9
callProviderLifecycles@webpack-internal:///../../../core/esm5/core.js:12929:9
callElementProvidersLifecycles@webpack-internal:///../../../core/esm5/core.js:12903:13
callLifecycleHooksChildrenFirst@webpack-internal:///../../../core/esm5/core.js:12886:29
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14036:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14383:21
execEmbeddedViewsAction@webpack-internal:///../../../core/esm5/core.js:14341:17
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14033:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14383:21
execEmbeddedViewsAction@webpack-internal:///../../../core/esm5/core.js:14341:17
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14033:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14383:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14315:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14038:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14383:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14315:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14038:5
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15286:39
debugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14823:12
ViewRef_.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11797:13
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6104:58
ApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6104:13
ApplicationRef.prototype._loadComponent@webpack-internal:///../../../core/esm5/core.js:6170:9
ApplicationRef.prototype.bootstrap@webpack-internal:///../../../core/esm5/core.js:6058:9
PlatformRef.prototype._moduleDoBootstrap/<@webpack-internal:///../../../core/esm5/core.js:5778:74
PlatformRef.prototype._moduleDoBootstrap@webpack-internal:///../../../core/esm5/core.js:5778:13
PlatformRef.prototype.bootstrapModuleFactory/</</<@webpack-internal:///../../../core/esm5/core.js:5699:21
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:392:17
onInvoke@webpack-internal:///../../../core/esm5/core.js:4949:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:391:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:142:24
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:873:52
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4940:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:602:25
NestedMenusComponent.html:29:10
View_NestedMenusComponent_3
NestedMenusComponent.html:29:10
DebugContext_.prototype.logError
core.js:15030
ErrorHandler.prototype.handleError
core.js:1488
ApplicationRef.prototype.tick/<
core.js:5915:54
ZoneDelegate.prototype.invoke
zone.js:392
Zone.prototype.run
zone.js:142
NgZone.prototype.runOutsideAngular
core.js:4701:47
ApplicationRef.prototype.tick
core.js:5915
ApplicationRef.prototype._loadComponent
core.js:5974
ApplicationRef.prototype.bootstrap
core.js:5862
PlatformRef.prototype._moduleDoBootstrap/<
core.js:5582:65
PlatformRef.prototype._moduleDoBootstrap
core.js:5582
PlatformRef.prototype.bootstrapModuleFactory/</</<
core.js:5503
ZoneDelegate.prototype.invoke
zone.js:392
onInvoke
core.js:4753
ZoneDelegate.prototype.invoke
zone.js:391
Zone.prototype.run
zone.js:142
scheduleResolveOrReject/<
zone.js:873
ZoneDelegate.prototype.invokeTask
zone.js:425
onInvokeTask
core.js:4744
ZoneDelegate.prototype.invokeTask
zone.js:424
Zone.prototype.runTask
zone.js:192
drainMicroTaskQueue
zone.js:602
ERROR CONTEXT 
Object { view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…} }
NestedMenusComponent.html:29:10
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
core.js:3660
[WDS] Disconnected!
client:164

基本菜单按需要工作。当打开表驱动菜单时，会显示菜单的两个项目，第二个项目包含指示它公开子菜单的图标，但会引发以下运行时错误:

ERROR 
TypeError: templateRef is undefined
 Stack trace:
ViewContainerRef_.prototype.createEmbeddedView@webpack-internal:///../../../core/esm5/core.js:11626:30
DomPortalOutlet.prototype.attachTemplatePortal@webpack-internal:///../../../cdk/esm5/portal.es5.js:448:40
BasePortalOutlet.prototype.attach@webpack-internal:///../../../cdk/esm5/portal.es5.js:303:20
OverlayRef.prototype.attach@webpack-internal:///../../../cdk/esm5/overlay.es5.js:647:45
MatMenuTrigger.prototype.openMenu@webpack-internal:///../../../material/esm5/menu.es5.js:861:13
MatMenuTrigger.prototype._handleClick@webpack-internal:///../../../material/esm5/menu.es5.js:1185:13
View_NestedMenusComponent_3/<@ng:///AppModule/NestedMenusComponent.ngfactory.js:64:23
handleEvent@webpack-internal:///../../../core/esm5/core.js:13777:115
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15286:39
debugHandleEvent@webpack-internal:///../../../core/esm5/core.js:14873:12
dispatchEvent@webpack-internal:///../../../core/esm5/core.js:10186:16
renderEventHandlerClosure/<@webpack-internal:///../../../core/esm5/core.js:10807:38
decoratePreventDefault/<@webpack-internal:///../../../platform-browser/esm5/platform-browser.js:2679:53
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4940:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:499:24
invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1540:9
globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1566:17
NestedMenusComponent.html:29:10
ERROR CONTEXT 
Object { view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…} }
NestedMenusComponent.html:29:10

Answer 1

您可以动态构建菜单。
您只需获取元素引用，而不是元素名称。

您可以使用@ViewChild和@ViewChildren来实现此目的。

这是一个working example您的代码。