Angular 根据管线/组件使用不同的主题

我试图在我的整个应用程序中使用一个主题，除了我想加载另一个主题的页面之外

到目前为止，在我的

main.scss

中，我包含了一个主题

@import '~@angular/material/theming';
@include mat-core();

$myapp-primary: mat-palette($mat-light-green, 50);
$myapp-accent:  mat-palette($mat-light-green);

$myapp-light-theme: mat-light-theme($myapp-primary, $myapp-accent);
$myapp-dark-theme: mat-dark-theme($myapp-primary, $myapp-accent);

@include angular-material-theme($myapp-light-theme);

如您所见，我向主题声明：

$myapp light theme

和

$myapp dark theme

，并使用

$myapp light theme

作为主主题。我试图做的是，在我的

home.component

（加载到

）中切换主题，将以下代码放入组件样式（

home.component.scss

）：

---

但这并不像我预期的那样有效。我想实现的目标是否可能？

解决方案是，将自定义主题包装到额外的类中：

@include angular-material-theme($myapp-light-theme);
.dark-theme {
    @include angular-material-theme($myapp-dark-theme);
}

在要启用自定义主题的组件内部：

  constructor(private overlayContainer: OverlayContainer, @Inject(DOCUMENT) private document: Document) {
    overlayContainer.getContainerElement().classList.add('dark-theme');
    document.body.classList.add('dark-theme');
  }

  public ngOnDestroy(): void {
    this.document.body.classList.remove('dark-theme');
    this.overlayContainer.getContainerElement().classList.remove('dark-theme');
  }

  constructor(private overlayContainer: OverlayContainer, @Inject(DOCUMENT) private document: Document) {
    overlayContainer.getContainerElement().classList.add('dark-theme');
    document.body.classList.add('dark-theme');
  }

  public ngOnDestroy(): void {
    this.document.body.classList.remove('dark-theme');
    this.overlayContainer.getContainerElement().classList.remove('dark-theme');
  }