Angular 12中如何基于@Input布尔属性动态设置元素类名？

前置问题修复 #

在实现逻辑前需要先修正现有代码的两个隐藏问题：

• 父组件传值修正：当前你写的isRed="true"是传递字符串"true"而非布尔值，要触发布尔类型的属性绑定必须加方括号，修改为：

<hello
  [isRed]="true">
</hello>

• 类名赋值修正：CSS中的.red是选择器写法，模板绑定class时只需要类名本身，不要加前缀.，所以赋值应该是redClass = 'red'而非'.red'

可选实现方案 #

方案1：使用@Input setter 监听输入变化（最匹配你写的逻辑） #

直接在输入属性的setter里处理判断逻辑，不需要引入额外生命周期：

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

@Component({
  selector: 'hello',
  template: `<h1 class="{{redClass}}">Test</h1>`,
  styles: [`h1 { font-family: Lato; } .red { background: red }`]
})
export class HelloComponent  {
  redClass = '';
  // 用setter监听isRed输入变化
  @Input() set isRed(value: boolean) {
    this.redClass = value === true ? 'red' : '';
  }

  // 如果组件内部需要读取isRed的值，可以补充以下代码
  // private _isRed: boolean = false;
  // get isRed(): boolean {
  //   return this._isRed;
  // }
}

方案2：使用ngOnChanges生命周期监听 #

适合输入属性有多个关联逻辑的场景：

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

@Component({
  selector: 'hello',
  template: `<h1 class="{{redClass}}">Test</h1>`,
  styles: [`h1 { font-family: Lato; } .red { background: red }`]
})
export class HelloComponent implements OnChanges  {
  redClass = '';
  @Input() isRed: boolean = false;

  ngOnChanges(changes: SimpleChanges): void {
    // 只在isRed发生变化时处理逻辑
    if (changes['isRed']) {
      this.redClass = this.isRed === true ? 'red' : '';
    }
  }
}

方案3：模板直接绑定ngClass（官方推荐，无需额外维护变量） #

不需要单独声明redClass变量，直接用Angular内置的ngClass指令绑定类，代码更精简：

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

@Component({
  selector: 'hello',
  template: `<h1 [ngClass]="{'red': isRed}">Test</h1>`,
  styles: [`h1 { font-family: Lato; } .red { background: red }`]
})
export class HelloComponent  {
  @Input() isRed: boolean = false;
}

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