Angular 材质组件不继承类

Question

我使用的是有角度的材质主题，应用了默认的浅色主题，如果 .dark-theme 类位于元素上，则应用深色主题。我遇到了一个问题，尽管使用的角度材质组件不会从父元素继承此类。

这是显示问题的示例组件：

<div class="dark-theme">
    <h2>Hello world</h2>
    <div class="menu-button">
        <button
            color="accent"
            mat-icon-button
            [matMenuTriggerFor]="menu"
            aria-label="Dropdown menu of available pages"
        >
            <mat-icon>menu</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
            <button (click)="log('home clicked')" mat-menu-item>Home</button>
        </mat-menu>
    </div>
</div>

我期望上面的代码为 mat-menu 组件提供深色主题类。如果我直接应用该类

<mat-menu class="dark-theme" #menu="matMenu">

，它会按预期工作，并且我会看到深色主题的菜单。此外，我尝试放弃并这样做，但使用BehaviorSubject和服务在我的实际组件中动态分配类

[class.dark-theme]="stateService.isDarkModeEnabled()"

，但是当启用暗模式变量时，这仍然无法应用暗主题类。

我不认为这是问题，但作为参考，这里是我的样式是如何在 custom-styles.scss 中定义的，该样式包含在 angular.json 中。

@include mat.all-component-themes($default-theme);

:root {
    --primary-default: #{mat.get-theme-color($default-theme, primary, default)};
}

.dark-theme {
    @include mat.all-component-themes($dark-theme);
    --primary-default: #{mat.get-theme-color($dark-theme, primary, default)};
}

Answer 1

我想我终于弄清楚了这个问题，这篇文章很有帮助：如何添加类到动态渲染的角度材质组件

我没有意识到 cdk 覆盖容器不是主应用程序组件本身的一部分。我也不明白为什么 [ngClass] 不起作用，而且 [class.dark-theme] 还没有起作用 [class] did 起作用。