使用Component装饰器的host属性时组件样式未生效

这问题出在Angular默认的**视图封装（ViewEncapsulation.Emulated）**机制上：组件内部的样式默认只会作用于组件模板内的元素，而通过host属性添加的header-bg类是挂在组件的宿主元素<app-header>上的，这个元素属于父组件的DOM范围，所以组件内的样式无法覆盖到它。

给你三种可行的解决办法：

方法一：使用:host选择器（推荐） #

直接在HeaderComponent的样式文件里用:host选择器指定宿主元素，这样样式就能精准作用到<app-header>上：

:host.header-bg {
  background-color: aqua;
}

组件代码保持不变即可，这种方式不会破坏样式封装，也不会污染全局样式。

方法二：关闭组件的视图封装 #

在HeaderComponent的@Component装饰器里关闭视图封装，这样组件内的样式会变成全局样式，能作用到宿主元素：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  // ...其他配置
  host: {
    'class': 'header-bg'
  },
  encapsulation: ViewEncapsulation.None,
  // ...其他配置
})
export class HeaderComponent {}

注意：这种方法会让组件内所有样式变成全局样式，可能和其他组件样式冲突，谨慎使用。

方法三：把样式放到全局样式文件 #

将.header-bg的样式移到项目的全局样式文件（比如src/styles.css）里，全局样式会作用于所有DOM元素，包括组件宿主元素：

/* 全局styles.css文件中 */
.header-bg {
  background-color: aqua;
}

这种方法适合通用样式，但如果是组件专属样式，不推荐用全局样式，避免样式污染。

内容的提问来源于stack exchange，提问作者Richard77