无法访问角度材料内的元素

Question

我试图使用下面的代码访问类名称mat-menu内的按钮，但不起作用：

TS：

constructor(private elem:ElementRef){
}

ngOnInit(){
 let elements = this.elem.nativeElement.querySelectorAll('.role-menu');
 console.log(elements);
}

HTML：

<button [matMenuTriggerFor]="menu1">Test</button>
<mat-menu yPosition="below" #menu1="matMenu">
<button mat-menu-item><mat-icon>account_box</mat-icon> My Profile</button>

 <button class="role-menu" mat-menu-item><mat-icon>lock</mat-icon> API Keys</button>

<button mat-menu-item><mat-icon>power_settings_new</mat-icon> Logout</button>
 </mat-menu>

创建了一个演示Stackblitz here

Answer 1

访问模板内容的'Angular'方式是通过@ViewChild和@ViewChidren装饰器和模板引用：

HTML

<button [matMenuTriggerFor]="menu1">Test</button>
<mat-menu yPosition="below" #menu1="matMenu">
  <button mat-menu-item><mat-icon>account_box</mat-icon> My Profile</button>

  <button #roleMenuButton class="role-menu" mat-menu-item><mat-icon>lock</mat-icon> API Keys</button>

  <button mat-menu-item><mat-icon>power_settings_new</mat-icon> Logout</button>
</mat-menu>

TS

import { AfterViewInit, Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
...
@ViewChildren('roleMenuButton') roleMenuButtons: QueryList<ElementRef>;
...
ngAfterViewInit(){
  let elements = this.roleMenuButtons.toArray();
  console.log(elements);
}