带角材料的角-对话框主题已损坏 [英] Angular w/ Angular Material - Dialog theme broken

问题描述

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

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

由于我找不到解决此问题的方法，因此对为何无法正常运行的任何见解将不胜感激.

解决方案

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

这是在您的 AppModule 中的方式:

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

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

---

更新:要动态更改主题，请执行以下操作:

 从'@ angular/cdk/overlay'导入{OverlayContainer};@零件({选择器:"app-root"，templateUrl:"./app.component.html"，styleUrls:['./app.component.scss']})导出类AppComponent {构造函数(private _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);
}

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