在.theme_name中使用:主机上下文( Angular2 )时，在哪里应用父主题类？
在.theme_name中使用:主机上下文( Angular2 )时，在哪里应用父主题类？
提问于 2018-04-26 21:28:23
我正在构建一个主题Angular2应用程序。我有很多嵌套组件，我想通过更改一个父类来更改整个应用程序的主题。假设有一个主题叫做"theme1“。当我将其应用于非常父的html-标记时，所有嵌套的子组件都将使用:host- very切换样式，如下所示：
:host-context(.theme1) .title-toc {
font-family: "bookmania";
font-weight: 700;
font-size: 20pt;
text-transform: uppercase;
color: #a5a5a5;
}然而，把这个class="theme1“放在哪里呢？当我把它放到<body>上时，它可以工作，所以代码本身也能工作，但是我需要动态地更改主题，所以它必须在某个角度组件中，而不是在我可以使用[ngClass]的地方。例如，在AppComponent内部。但是当我把它放进app.component里面(例如路由器插座或者其他应该包装我整个应用程序的包装标签)，它就不再起作用了。
我是否必须用以下几个字来深入浅出：？不知何故？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-26 21:43:08
可以绑定到根组件元素的class属性，如下所示：
export class AppComponent implements OnInit {
@HostBinding('attr.class') mainClass = 'theme1';
changeTheme(theme) {
this.mainClass = theme;
}
}Stack Overflow用户
发布于 2018-04-27 17:24:47
：host- sees ()查看应用于文档body的类。在加载应用程序之后，可以使用JavaScript设置body类，如下所示：
var myclass = "my-theme-name";
document.querySelector('body').classList.add(myclass);这样，您甚至可以从服务器加载主题名称，然后通过JS从任何Angular2组件将其应用到主体：
:host-context(.my-theme-name) .my-theme-specific-style页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50052089
复制相关文章
相似问题
腾讯云开发者
