我在点击mat-nav-list项目时尝试触发打开菜单.
<mat-nav-list> <mat-list-item (click)="onOpenMenu(menu)" *ngFor="let i of data"> <div mat-line> {{ i.name }} </div> <p mat-line> {{ i.email }} </p> <button mat-icon-button [matMenuTriggerFor]="menu"> <mat-icon>more_vert</mat-icon> </button> </mat-list-item> <mat-menu #menu="matMenu"> <button mat-menu-item>View profile</button> <button mat-menu-item>Add contact</button> </mat-menu> </mat-nav-list>
TS@H_502_2@
onOpenMenu(menu: any): void { // menu doesn't have any openMenu() function // which is of course not a trigger object but a menu itself. console.log(menu); }
我一直试图看看这个更接近我情况的issue on github.但在我的情况下,我有一个动态的项目列表,我想每次点击打开一个菜单.@H_502_2@
您需要从[matMenuTriggerFor]元素中获取MatMenuTrigger实例
#menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu"
哪里@H_502_2@
> #menuTrigger是模板引用变量
> matMenuTrigger是exportAs MatMenuTrigger元数据的属性@H_502_2@
然后简单地打电话@H_502_2@
(click)="menuTrigger.openMenu()"
Stackblitz example@H_502_2@
在这里阅读更多关于模板参考变量@H_502_2@
> What is #auto attribute here and why it is required@H_502_2@