Angular如何将父组件的条件CSS类传递给子组件（无需自定义指令）

方法一：通过@Input传递状态（最直观） #

直接把父组件控制类的状态变量传给子组件，子组件用该变量绑定类：

父组件模板：

<app-myComponent [class.active]="activeState" [isActive]="activeState"></app-myComponent>

子组件代码：

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

@Component({
  selector: 'app-myComponent',
  templateUrl: './myComponent.component.html'
})
export class MyComponent {
  @Input() isActive = false;
}

子组件模板：

<div *ngFor="let item of items">
  <div [class.active]="isActive"></div>
</div>

这种方法简单直接，状态同步可靠，适合大多数场景。

方法二：读取宿主元素类并监听变化 #

如果不想额外添加输入属性，可直接在子组件中读取宿主元素（即<app-myComponent>）的类，并监听类的变化来同步状态：

子组件代码：

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

@Component({
  selector: 'app-myComponent',
  templateUrl: './myComponent.component.html'
})
export class MyComponent implements OnInit {
  isParentActive = false;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.updateActiveState();
    // 监听宿主元素的class属性变化
    const observer = new MutationObserver(() => {
      this.updateActiveState();
    });
    observer.observe(this.el.nativeElement, { attributes: true, attributeFilter: ['class'] });
  }

  private updateActiveState() {
    this.isParentActive = this.el.nativeElement.classList.contains('active');
  }
}

子组件模板同方法一：

<div *ngFor="let item of items">
  <div [class.active]="isParentActive"></div>
</div>

这种方法无需修改父组件传参，直接从宿主元素获取状态，适合不想新增输入属性的场景。

方法三：CSS选择器继承样式（仅样式需求） #

如果只是需要子组件div在父组件有.active类时应用对应样式，而非必须给div添加.active类，纯CSS就能解决：

子组件样式文件：

:host(.active) .target-div {
  /* 父组件有.active时，子组件div的样式 */
  background-color: #165DFF;
  color: #fff;
}

子组件模板：

<div *ngFor="let item of items">
  <div class="target-div"></div>
</div>

这种方法无需修改组件逻辑，适合仅需样式同步的场景。

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