Angular w/Angular Material - 对话框主题损坏

Question

您好，我在对话框组件中遇到 Angular Material 主题中断的问题，其中文本和其他组件的颜色未按应有的方式工作。

在 app.component 中，我有一个设置图标按钮来打开一个对话框 main.settings.dialog 但是当它打开时如下图所示，颜色不适合深色主题。

任何关于为什么这不能以正常方式工作的见解将不胜感激，因为我找不到解决这个问题的方法。

Live example site

Link to full source code

Answer 1

由于您的主题位于样式类中，因此您需要将其添加到全局覆盖容器中。

这是在您的 AppModule 中的方式:

import {OverlayContainer} from '@angular/cdk/overlay';

@NgModule({
      // ...
})
export class AppModule {
      constructor(overlayContainer: OverlayContainer) {
          overlayContainer.getContainerElement().classList.add('app-dark-theme');
      }
}

官方文档链接:https://material.angular.io/guide/theming#multiple-themes

---

更新: 动态改变主题:

import { OverlayContainer } from '@angular/cdk/overlay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

constructor(
  private _overlayContainer: OverlayContainer
) { }

changeTheme(theme: 'app-theme-dark' | 'app-theme-light'): void {
  // remove old theme class and add new theme class
  const overlayContainerClasses = this._overlayContainer.getContainerElement().classList;
  const themeClassesToRemove = Array.from(overlayContainerClasses)
    .filter((item: string) => item.includes('app-theme-'));
  if (themeClassesToRemove.length) {
    overlayContainerClasses.remove(...themeClassesToRemove);
  }
  overlayContainerClasses.add(theme);
}