【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-29
      • 2021-06-11
      • 2020-06-02
      相关资源
      最近更新 更多