Angular中父组件CSS样式作用于子组件的可行方案有哪些？

Angular默认开启ViewEncapsulation.Emulated视图封装模式，会给每个组件的宿主元素自动添加唯一属性前缀，限制组件样式的作用范围，因此原生JS中直接写后代选择器的写法默认无法跨组件生效。你可以根据业务场景选择以下方案实现需求：

方案1：使用:host + ::ng-deep 伪类（最常用，推荐大部分场景使用） #

该方案可以在不关闭视图封装的前提下，仅让指定样式穿透到当前组件的所有后代节点，不会造成全局样式污染，写法如下：
在父组件的CSS文件中写入：

/* 父组件CSS文件 */
:host ::ng-deep .parent{
    height: 1000px;
    width: 800px;
}

:host ::ng-deep .child{
    height: 80%;
    width: 90%;
}

:host ::ng-deep .grandchild{
    height: 30%;
    width: 20%;
}

说明：:host 限定样式仅作用在当前父组件范围内，::ng-deep 会跳过Angular的视图封装属性校验，让样式命中后代组件内部的对应类名。

方案2：关闭父组件的视图封装 #

如果你需要父组件的所有样式都能作用到内部后代组件，可以在父组件的@Component装饰器中关闭视图封装：

// 父组件ts文件
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class ParentComponent {}

之后你直接在父组件CSS里写和原生示例完全一致的代码即可生效。注意该方案会让父组件的所有样式变成全局样式，建议给所有类名添加专属前缀避免和全局样式冲突。

方案3：写入全局样式文件 #

你可以把这部分样式直接写到Angular项目的全局样式文件（通常为src/styles.css）中，全局样式不受视图封装限制，所有组件内的对应类都会命中该样式，适合复用度高的通用布局类样式。

方案4：通过输入属性传递样式/类名 #

如果想要完全避免样式穿透带来的污染风险，可以通过@Input逐层传递样式类或样式属性：

// 子组件ts文件
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<section [class]="childClass">...</section>'
})
export class ChildComponent {
  @Input() childClass = '';
}

父组件调用时传入对应类名即可，该方案符合Angular单向数据流规范，缺点是嵌套层级过深时传递成本较高。

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