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

访问模板内容的“角度”方式是通过SELECT AuthorID, SUM(AuthorID) AS test_col, COUNT(*) FROM book GROUP BY AuthorID和@ViewChild装饰器和模板引用：

HTML

@ViewChidren

TS

<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>

无法访问角形材料内部的元素

1 个答案: