Angular2中使用:host-context时，父主题类应应用于何处？

嗨，这个问题我太熟悉了！要让所有嵌套组件都能通过:host-context(.theme1)匹配到主题样式，你只需要把theme1类加在整个应用的最外层DOM元素上就行，这里有两个最推荐的位置：

1. 直接加在index.html的<body>或<html>标签上 #

这是最直接的全局方式，因为<body>是所有Angular组件的最终父容器。

• 静态设置的话，直接修改src/index.html：

<body class="theme1">
  <app-root></app-root>
</body>

• 动态切换的话，你可以创建一个主题服务，在需要切换的地方修改document.body的类：

// theme.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  toggleTheme() {
    document.body.classList.toggle('theme1');
    // 如果有多主题，可以先移除所有主题类，再添加新的
    // document.body.classList.remove('theme1', 'theme2');
    // document.body.classList.add('new-theme');
  }
}

2. 绑定到根组件（AppComponent）的宿主元素 #

Angular的根组件（通常是AppComponent）的宿主元素是<app-root>，它是所有子组件的直接父级，把主题类加在这里也能让所有嵌套组件通过:host-context检测到。

你可以用@HostBinding来动态绑定类：

// app.component.ts
import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @HostBinding('class.theme1') isTheme1Active = true;

  toggleTheme() {
    this.isTheme1Active = !this.isTheme1Active;
  }
}

为什么这两个位置可行？ #

:host-context(.theme1)的工作原理是向上遍历整个DOM树，寻找带有theme1类的祖先元素。只要这个类存在于应用最外层的容器上，所有嵌套的子组件都能匹配到这个上下文，从而应用对应的样式。

验证你的样式 #

你写的子组件样式完全没问题，比如：

/* 某嵌套子组件的样式文件 */
:host-context(.theme1) .title-toc {
  font-family: "bookmania";
  font-weight: 700;
  font-size: 20pt;
  text-transform: uppercase;
  color: #a5a5a5;
}

只要最外层有theme1类，这个样式就会自动应用到子组件的.title-toc元素上。

内容的提问来源于stack exchange，提问作者Juhana Pietari Lehtiniemi