我正在构建一个主题Angular2应用程序。我有大量的嵌套组件，我想通过更改一个父类来更改整个应用程序的主题。假设一个主题称为" theme1"。当我将其应用于非常父母的html-tag时，所有嵌套的子组件将通过以下方式切换样式：host-context，诸如此类：
:host-context(.theme1) .title-toc {
font-family: "bookmania";
font-weight: 700;
font-size: 20pt;
text-transform: uppercase;
color: #a5a5a5;
}
但是，将此类=" theme1"放在哪里？当我将其放在<body>上时，它可以工作，因此代码本身有效，但是我需要动态更改主题，以便它必须在某些角度组件内，而不是可以使用[ngClass]。例如在AppComponent中。但是，当我将其放入App.component(例如路由器输出或任何其他应该包装我的应用程序的包装标签(时，它不再起作用了。
我必须以:: ng-deep以某种方式使其深入或可能是什么问题？
您可以像这样绑定到root组件元素的 class属性：
export class AppComponent implements OnInit {
@HostBinding('attr.class') mainClass = 'theme1';
changeTheme(theme) {
this.mainClass = theme;
}
}
：host-context((看到文档上应用的类 body 。您可以在应用程序加载后使用JavaScript设置身体类，例如：
var myclass = "my-theme-name";
document.querySelector('body').classList.add(myclass);
这样，您甚至可以从服务器加载主题名称，然后通过JS将其应用于任何Angular2组件的身体：
:host-context(.my-theme-name) .my-theme-specific-style