Angular 6中如何使用@HostBinding绑定多值类？

嘿，这个场景我之前开发的时候也遇到过！确实，写多个@HostBinding来分别判断每个类会显得冗余又不好维护，其实有两种更简洁优雅的方案可以解决这个问题：

方案一：通过计算属性直接返回目标类名 #

你可以用@HostBinding('class')绑定一个计算属性，根据当前的uiColor模型值动态返回对应的类名。这种方式适合每次只需要添加一个类的场景：

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

@Component({
  selector: 'app-colorful-component',
  template: `
    <select [(ngModel)]="uiColor">
      <option value="red">Red Theme</option>
      <option value="blue">Blue Theme</option>
      <option value="green">Green Theme</option>
      <option value="default">Default</option>
    </select>
  `
})
export class ColorfulComponent {
  // 绑定选择菜单的模型
  uiColor: string = 'default';

  // 动态计算宿主元素的类名
  @HostBinding('class') get hostClass(): string {
    switch(this.uiColor) {
      case 'red':
        return 'red-ui';
      case 'blue':
        return 'blue-ui';
      case 'green':
        return 'green-ui';
      default:
        return ''; // 默认不添加额外类，也可以返回基础类名
    }
  }
}

这种方式的好处是逻辑高度集中，只需要一个@HostBinding就能处理所有类的切换，后续要新增颜色类也只需要在switch里加分支就行。

方案二：用对象语法同时管理多个类（含固定类） #

如果你的组件还需要保留其他固定类（比如你之前用到的compact-ui），或者需要同时控制多个类的开关，可以用对象语法。返回一个键为类名、值为布尔值的对象，Angular会自动根据布尔值添加/移除对应的类：

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

@Component({
  selector: 'app-colorful-component',
  template: `
    <select [(ngModel)]="uiColor">
      <option value="red">Red Theme</option>
      <option value="blue">Blue Theme</option>
      <option value="green">Green Theme</option>
      <option value="default">Default</option>
    </select>
    <button (click)="isCompact = !isCompact">Toggle Compact Mode</button>
  `
})
export class ColorfulComponent {
  uiColor: string = 'default';
  isCompact: boolean = false;

  @HostBinding('class') get hostClasses(): { [className: string]: boolean } {
    return {
      'compact-ui': this.isCompact, // 保留原有的compact类逻辑
      'red-ui': this.uiColor === 'red',
      'blue-ui': this.uiColor === 'blue',
      'green-ui': this.uiColor === 'green'
    };
  }
}

这种方式的优势是可以同时处理静态和动态类的绑定，每个类的生效条件一目了然，比写多个独立的@HostBinding要整洁得多。

小提示 #

• 确保你的CSS里已经定义了red-ui、blue-ui这些类的样式哦
• 如果uiColor可能出现未预期的值，记得在default分支里处理，避免添加无效的类名

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