Добавление класса CSS в глобальное наложение в Angular 9 во время выполнения

Question

Я создаю Angular 9 веб-приложение, которое меняет тему по выбору пользователя, подобно материалу. angular .io / . Чтобы обработать полученный прозрачный фон mat-select, я затем обратился к Angular материал руководство по темам , чтобы добавить мои собственные классы тем в глобальный оверлейный контейнер следующим образом.

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 всегда имеет последний добавленный класс (в данном случае, фиолетово-зеленый) в качестве наложения независимо от выбранной темы. Как я мог решить это? Есть ли способ, с помощью которого я мог бы добавить тему в classList через файл TypeScript компонента?

Answer 1

Допустим, у вас есть 2 темы: «пурпурно-янтарный» и «indi go -pink», эти темы изменяются нажатием кнопки.

Вам нужно вызвать функцию, когда эти кнопки нажаты.

some-component. html:

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

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

...