Angular with/ Angular Material - 对话框主题已损坏答案

【问题标题】：Angular w/ Angular Material - Dialog theme brokenAngular with/ Angular Material - 对话框主题已损坏
【发布时间】：2018-01-24 20:40:45
【问题描述】：

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

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

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

Live example site

Link to full source code

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案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);
}

【讨论】：

很抱歉回复晚了，但这很有效，非常感谢！我会仔细阅读文档以更好地理解它:)
你将如何动态改变它？

【解决方案2】：

问题出在您的material2-app-theme.scss 主题文件中：

.app-dark-theme {
  @include angular-material-theme($dark-theme);
}

这在 Sass 中被称为 mixin。以这种方式编写时，主题仅适用于类为 .app-dark-theme 的元素。

删除类并离开：

@include mat-core();

$primary: mat-palette($mat-brown, 400);
$accent:  mat-palette($mat-yellow, 100);
$warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($primary, $accent, $warn);


@include angular-material-theme($dark-theme);

将主题应用于您的整个应用。从外观上看，这意味着您可以取出当前存在的大量 css。

另请注意：对话框容器中的第一行没有被除父 div 之外的任何标签包裹，因此没有对其应用字体样式。 Material 提供了几个方便的指令来帮助设置对话框样式，例如<h2 mat-dialog-title>Dialog Title!</h2>

【讨论】：