带有 Angular Material 的 Angular - 对话框主题已损坏

问题描述

您好，我在对话框组件中遇到了 Angular Material 主题中断的问题，其中文本和其他组件的颜色无法正常工作.

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

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

解决方案

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

在您的 AppModule 中，方法如下:

从'@angular/cdk/overlay'导入{OverlayContainer}；@NgModule({//...})导出类 AppModule {构造函数(覆盖容器:覆盖容器){overlayContainer.getContainerElement().classList.add('app-dark-theme');}}

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

---

更新:动态更改主题:

import { OverlayContainer } from '@angular/cdk/overlay';@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})导出类 AppComponent {构造函数(私有_overlayContainer:OverlayContainer) { }changeTheme(theme: 'app-theme-dark' | 'app-theme-light'): void {//删除旧的主题类并添加新的主题类const overlayContainerClasses = this._overlayContainer.getContainerElement().classList;const themeClassesToRemove = Array.from(overlayContainerClasses).filter((item: string) => item.includes('app-theme-'));如果(themeClassesToRemove.length){overlayContainerClasses.remove(...themeClassesToRemove);}overlayContainerClasses.add(theme);}

Hello i'm having an issue with Angular Material theme breaking in a Dialog Component, where the color of text and other components aren't working in the ways they should.

In app.component I have a setting icon button to open a dialog main.settings.dialog but when it opens as seen in the picture below the coloring is not fitting the Dark Theme.

Any insight as to why this isn't working in a normal way would be greatly appreciated as i can't find a way to fix this.

Live example site

Link to full source code

解决方案

Since you have your theme inside a style class, you need to add that to global overlay container.

Here is how, in your AppModule:

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

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

Link to official documentation: https://material.angular.io/guide/theming#multiple-themes

---

UPDATE:For dynamically changing the theme:

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);
}

这篇关于带有 Angular Material 的 Angular - 对话框主题已损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！