如何按规范无条件为Angular组件宿主元素绑定类？

当团队 lint 规则禁止使用host元数据属性，要求用@HostBinding替代时，针对无条件绑定类的场景，有两种更简洁的实现方式：

单类绑定：匿名 getter 简化代码 #

不需要额外命名冗余字段，直接用匿名 getter 返回true即可：

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

@Component({
  selector: 'app-my-component',
  template: `<!-- template -->`,
})
export class MyComponent {
  @HostBinding('class.my-unconditional-class')
  get _() { return true; }
}

这里用下划线_作为 getter 名称仅作占位符，避免不必要的字段命名，完全满足 lint 要求且代码更紧凑。

多类绑定：批量返回类名字符串 #

如果需要绑定多个无条件类，可以直接绑定class属性，通过 getter 返回所有类名拼接的字符串：

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

@Component({
  selector: 'app-my-component',
  template: `<!-- template -->`,
})
export class MyComponent {
  @HostBinding('class')
  get hostClasses() {
    return 'class-one class-two class-three';
  }
}

这种方式在多类场景下更高效，不需要为每个类单独编写@HostBinding装饰器。

这两种方式都符合 Angular 风格指南和@angular-eslint/no-host-metadata-property规则，同时解决了原方案代码冗余的问题。

内容的提问来源于stack exchange，提问作者Mikkel R. Lund