Question

我正在构建一个主题Angular2应用。我有很多嵌套组件，我想通过更改一个父类来更改整个应用程序的主题。让我们说一个主题被称为＆＃34; theme1＆＃34;。当我将它应用于一个非常好的html标签时，所有嵌套的子组件将使用：host-context切换样式，如下所示：

:host-context(.theme1) .title-toc {
    font-family: "bookmania";
    font-weight: 700;
    font-size: 20pt;
    text-transform: uppercase;
    color: #a5a5a5;
}

然而，在哪里放这个类=＆＃34; theme1＆＃34;？当我把它放到<body>时，它可以工作，所以代码本身可以工作，但我需要动态更改主题，所以它必须在一些Angular组件中，而不是我可以使用[ngClass]。例如，在AppComponent中。但是，当我把它放在app.component（例如路由器插座或任何其他包装标签，应该包装我的整个应用程序）时，它不再工作。

我是否必须以某种方式使用:: ng-deep或者可能出错？

Answer 1

您可以绑定到根组件元素的class属性，如下所示：

export class AppComponent implements OnInit {

  @HostBinding('attr.class') mainClass = 'theme1';

  changeTheme(theme) {
    this.mainClass = theme;
  }

}

Answer 2

：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

在Angular2中使用：host-context（.theme_name）时应用父主题类的位置？

2 个答案: