代码之家 › 专栏 › 技术社区 › User3250

无法访问角材质中的元素

angular-material angular

0

User3250 · 技术社区 · 7 年前

我正在尝试使用下面的代码来访问 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>

here

1 回复 | 直到 7 年前

1

0

G. Tranter 7 年前

访问模板内容的“角度”方式是通过 @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>

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