将使用 ng-class 的类添加到 mat-menu答案

【问题标题】：adding a class using ng-class to a mat-menu将使用 ng-class 的类添加到 mat-menu
【发布时间】：2019-11-24 18:44:10
【问题描述】：

我正在尝试将自定义类添加到我的应用程序中的 mat-menu，该值对包含这段 HTMl 的组件可见，并且它在 DOM 元素兄弟上的计算结果为 true，但它没有当我检查生成的 HTML 时，似乎真的适用于它，尽管包含组件被封装到多个角度组件中，但 mat-menu 容器也作为直接子元素添加到 body HTML 元素中。

我的HTML如下

        <mat-menu class="more-menu" [ngClass]="{ dutch: languageFlag === 'nl' }" #cardOptions="matMenu" xPosition="before" [overlapTrigger]="false">
          <button mat-menu-item>
            Button 1
          </button>
          <button mat-menu-item>
            Button 2
          </button>
        </mat-menu>

我可以找到添加到其他元素但没有添加到 mat-menu 的 'dutch' 类

【问题讨论】：

如果“dutch”是字面类名，试试[ngClass]="{ 'dutch': languageFlag === 'nl' }"（带单引号）。
试过了，并没有真正改变什么

标签： angular angular-material angular-material-7

【解决方案1】：

使用 class 这是输入属性，它采用在主机 mat-menu 元素上设置的类并将它们应用到显示在覆盖容器中的菜单模板上。

@Input('class') panelClass: 字符串

<mat-menu class="customClass" #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Example

【讨论】：

这并不能真正解决问题，在附加的文档和示例中没有布尔评估或任何允许在评估表达式时添加类
您可以使用三元运算符在这里检查条件，如下所示：[class]="languageFlag === 'n1' ? 'customClass' : ''"
我不明白，这个'customClass'与@Input（'class'）有什么关系，你的例子中似乎没有提到这个，你能给我解释一下吗它应该在您附加的示例中进行
自定义类是您想在垫子菜单中动态添加的类，我使用了一些随机名称。您可以根据需要使用荷兰语或其他语言
以及 @Input('class') 的目的是什么，因为表达式是在 mat-menu 本身的 class attr 上评估的