在运行时将 CSS class 添加到 Angular 9 中的全局覆盖

Question

我正在创建一个 Angular 9 网络应用程序，它根据用户的选择更改主题，类似于 material.angular.io/。为了处理 mat-select 的透明背景，我参考了 Angular material theming guide , 在全局覆盖容器中添加我的自定义主题 classes 如下。

export class AppModule {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.getContainerElement().classList.add('purple-amber');
    overlayContainer.getContainerElement().classList.add('indigo-pink');
    overlayContainer.getContainerElement().classList.add('pink-bluegrey');
    overlayContainer.getContainerElement().classList.add('purple-green');
  }
 }

但是，mat-select 元素始终具有最后添加的 class（在本例中为紫绿色）作为叠加层，无论我 select 是什么主题。我该如何解决这个问题？有没有办法通过组件的 TypeScript 文件将主题添加到 classList？

Answer 1

假设您有 2 个主题："purple-amber" 和 "indigo-pink"，这些主题通过单击按钮更改。

您需要在点击这些按钮时调用一个函数。

一些-component.html:

...
<button mat-raised-button (click)="applyPurpleTheme()">Purple Amber</button>
<button mat-raised-button (click)="applyIndigoTheme()">Indigo Pink</button>
...

一些-component.ts

...
constructor(private OverlayContainer: OverlayContainer) { }

applyPurpleTheme() {
    const overlayContainerClasses = this.OverlayContainer.getContainerElement().classList;
    // I always remove other theme classes
    if (overlayContainerClasses.contains('indigo-pink')) {
        overlayContainerClasses.remove('indigo-pink');
    }

    overlayContainerClasses.add('purple-amber');
}


applyIndigoTheme() {
    const overlayContainerClasses = this.OverlayContainer.getContainerElement().classList;
    // I always remove other theme classes
    if (overlayContainerClasses.contains('purple-amber')) {
        overlayContainerClasses.remove('purple-amber');
    }

    overlayContainerClasses.add('indigo-pink');
}

...

在运行时将 CSS class 添加到 Angular 9 中的全局覆盖

Adding CSS class to Global Overlay in Angular 9 at runtime

angular-material

angular9