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

无法访问角材质中的元素

angular-material angular

User3250 · 技术社区 · 6 年前

我正在尝试使用下面的代码来访问 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 回复 | 直到 6 年前

G. Tranter 6 年前

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

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

5 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

5 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

5 月前

Jace Johnson · Typescript文件读取的变量类型错误

5 月前

Ole · Angular资源API是否支持为资源添加初始值?

5 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

5 月前