我使用的是有角度的材质主题,应用了默认的浅色主题,如果 .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)};
}
我想我终于弄清楚了这个问题,这篇文章很有帮助:如何添加类到动态渲染的角度材质组件
我没有意识到 cdk 覆盖容器不是主应用程序组件本身的一部分。我也不明白为什么 [ngClass] 不起作用,而且 [class.dark-theme] 还没有起作用 [class] did 起作用。