angular-material - 将角度 Material 菜单默认为打开状态

Question

我在工具栏中有一个标准的 Angular Material Menu...

    <button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="vidmenu" matTooltip="Watch videos" class="toolbar-btn"
(click)="onShowVid()">
    <mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon>
</button>
&emsp;
<mat-menu #vidmenu="matMenu">
    <button mat-menu-item>
        <img src="assets/images/vid_welcome.jpg" height=40px/>
        <span> Welcome</span>
    </button>
    <button mat-menu-item>
            <img src="assets/images/vid_video1.jpg" height=40px/>
            <span>Video 1</span>
        </button>
    <button mat-menu-item>
        <img src="assets/images/vid_video2.jpg" height=40px/>
        <span>Video 2</span>
    </button>
</mat-menu> 

在测试中，无论我们制作多大的 Material 菜单图标，用户都看不到它。一位用户建议我们在打开菜单的情况下开始体验……这样他们就可以看到选项，点击一个，然后菜单关闭。然后他们就会知道它在那里供将来使用。

我已经研究过在 ngOnInit() 期间远程触发 click() 以打开它，但所有示例都是旧的 angular 版本，即使我让它工作，我猜它也会有问题。

有没有办法简单地将菜单设置为“打开”的默认状态，然后从那里正常运行？

Answer 1

确保在用作 UI 菜单触发器的按钮上使用以下指令。

<button
[matMenuTriggerFor]="menu">
</button>

<mat-menu #menu="matMenu">
...
</mat-menu>

然后在组件的 .ts 代码中，确保具有以下导入:

import { MatMenuTrigger } from "@angular/material/menu"

创建以下属性:

@ViewChild(MatMenuTrigger) adjustersMenuTrigger: MatMenuTrigger

然后最后以编程方式打开菜单，使用以下代码:

this.adjustersMenuTrigger.openMenu()