angular – 如何以编程方式打开mat-menu？

发布时间：2020-12-17 08:21:40 所属栏目：安全来源：网络整理

导读：我在点击mat-nav-list项目时尝试触发打开菜单. HTML 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-

我在点击mat-nav-list项目时尝试触发打开菜单.

HTML

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

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.但在我的情况下,我有一个动态的项目列表,我想每次点击打开一个菜单.

DEMO

您需要从[matMenuTriggerFor]元素中获取MatMenuTrigger实例

#menuTrigger="matMenuTrigger"  [matMenuTriggerFor]="menu"

哪里

> #menuTrigger是模板引用变量
> matMenuTrigger是exportAs MatMenuTrigger元数据的属性

然后简单地打电话

(click)="menuTrigger.openMenu()"

Stackblitz example

在这里阅读更多关于模板参考变量

> What is #auto attribute here and why it is required

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!