使用 ng-class 添加 class 到 mat-menu

Question

我正在尝试将自定义 class 添加到我的应用程序中的垫子菜单，该值对包含这块 HTMl 的组件可见，并且它的计算结果为 true一个 DOM 元素兄弟，但当我检查结果 HTML 时，它似乎并不真正适用于它，而且 mat-menu 容器作为直接子元素添加到正文 HTML 元素，尽管包含的组件被封装到多个 angular 组件中。

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

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

Answer 1

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

@Input('class') panelClass: string

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

Example

使用 ng-class 添加 class 到 mat-menu

adding a class using ng-class to a mat-menu

angular-material

angular

angular-material-7