如何打开/关闭角度材质菜单

时间:2017-10-12 10:57:03

标签: html5 angular angular-material

我最近开始使用角度材料,我正在努力/不确定打开/关闭mat菜单......我在角度材料文档网站的示例中看到,他们为菜单分配了一个id然后应用了用于切换菜单的按钮的指令。例如[matMenuTriggerFor]="menu"

我怎样才能编写一个指令呢?我不确定如何将对特定菜单的引用传递给指令,然后该指令在具有该ID的DOM元素上调用toggle()方法?

以下代码会产生错误:

  

无法绑定到'matMenuTriggerFor',因为它不是'button'的已知属性。

没有将“exportAs”设置为“matMenu”的指令 我的代码:

<li>
    <button mat-icon-button [matMenuTriggerFor]="stockSystemMenu">
        <mat-icon class="sn-item">
            <i class="material-icons">archive</i>
        </mat-icon>
    </button>
    <span class="sn-item" (click)="toggleMenu(stockSystemMenu)">Stok System</span>

    <mat-menu #stockSystemMenu="matMenu">
        <button mat-menu-item>
            <mat-icon>
                <i class="material-icons">chevron_right</i>
            </mat-icon>
        <span>Service 1</span>
        </button>
    </mat-menu>
</li>

2 个答案:

答案 0 :(得分:6)

存在混淆,因为材料引入了一个突破性变化,因为我理解它。请参阅material 2 Changelog - Breaking Changes

从Material 2.0.0-beta.12开始。使用mat代替md-*。似乎只有material.angular.io的部分文档会更新。具体来说,如果您点击查看来源并查看md,我相信他们尚未将其替换为mat

因此,要么更新到Material 2.0.0-beta.12并使用mat-*,要么使用md-*

答案 1 :(得分:3)

“您的代码是正确的,您不需要编写matMenuTriggerFor指令,它是API的一部分,请确保已将MatMenuModule,MatButtonModule和MatIconModule导入您的应用程序模块。” - 来自评论