我有一个用Angular开发的应用程序，使用Material组件。我正在使用Material Theme为我的应用程序设计几个不同的主题（黑暗、明亮、多彩）。
我的主要组件 - app.component html是这样的。
<div [ngClass]="appTheme">
<router-outlet></router-outlet>
</div>
的值 appTheme 可以是 "光"、"暗 "或 "色"。根据这个不同 @mixin 正在执行，这将给我的应用程序涂上不同的颜色（你可以在网站上阅读更多关于它的信息。官方材料网站).
我的问题是，一些第三方组件和一些材料组件是浮动的弹出式。这些弹出窗口被附加到BODY标签上。所以html看起来是这样的。
<body>
<app-root>
<div class="dark">
...
</div>
</app-root>
<some-3rd-party-component>
...
</some-3rd-party-component>
</body>
正如你所看到的 dark 不会影响 some-3rd-party-component - 因为它不是一个子元素。
我如何在body元素上设置[ngClass]，这样我就可以控制第三方组件？
而不是像这样手动设置主题类 <div [ngClass]="appTheme">...</div> 你可以用纯js来编程设置。你只需要得到文档主体，并将主题类添加到类列表中。
setBodyClass() {
// get html body element
const bodyElement = document.body;
if (bodyElement) {
// remove existing class (needed if theme is being changed)
bodyElement.classList.remove(activeClass);
// add next theme class
bodyElement.classList.add(nextClass);
this.bodyClass = nextClass;
}
}
下面是一个 叠加闪电战 该方法的。
在这个SO的回答中，还提到了另一种方法（但没有经过be测试）。Angular2在body标签中添加类. 这里他们使用Angular的文档注入器和渲染器来改变body的类。
另一种我用来在覆盖层中主题各种不同的Angular Material组件的方法是使用 OverlayContainer 来自@angularcdkoverlay。类似于pure js的方法，但不能用于既不在matOverlayContainer内也不在app内的元素。
const matOverlayContainerClassList = this.overlayContainer.getContainerElement().classList;
matOverlayContainerClassList.remove(previousThemeName);
matOverlayContainerClassList.add(currentThemeName);