如何以编程方式打开 mat-menu? [英] How to open mat-menu programmatically?

问题描述

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

HTML

<mat-list-item (click)="onOpenMenu(menu)" *ngFor="let i of data"><div mat-line>{{ 我的名字 }}

<p mat-line>{{ i.email }}</p><button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></mat-list-item><mat-menu #menu="matMenu"><button mat-menu-item>查看个人资料</button><button mat-menu-item>添加联系人</button></mat-menu></mat-nav-list>

TS

onOpenMenu(menu: any): void {//菜单没有任何 openMenu() 函数//这当然不是触发器对象，而是菜单本身.控制台日志(菜单)；}

我一直在尝试查看这个 github 上的问题，它更接近我的情况.但就我而言，我有一个动态的项目列表，每次点击我都想打开一个菜单.

演示

解决方案

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

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

哪里

• #menuTrigger 是模板引用变量

• matMenuTrigger 是 MatMenuTrigger 元数据的 exportAs 属性

然后简单地调用

(click)="menuTrigger.openMenu()"

Stackblitz示例

在此处阅读有关模板引用变量的更多信息

• 什么是#auto 属性在这里以及为什么需要它

Im trying to trigger opening a menu when clicking mat-nav-list item.

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>

TS

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);
}

I have been trying to look at this issue on github which is closer to my situation. but in my case i have a dynamic list of items which i wanted to open a menu every click.

DEMO

解决方案

You need to get hold of MatMenuTrigger instance from [matMenuTriggerFor] element

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

where

• #menuTrigger is the template reference variable

• matMenuTrigger is exportAs property of MatMenuTrigger metadata

and then simply call

(click)="menuTrigger.openMenu()"

Stackblitz example

Read more about template reference variable here

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

这篇关于如何以编程方式打开 mat-menu?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！