Angular中如何无需冗余属性即可为指令永久绑定CSS类

当然有更简洁的实现方式！你完全不用定义test = true这种冗余变量，有两种常用方法可以让text-truncate类始终生效：

方法一：直接用@HostBinding绑定常量值 #

你可以把@HostBinding的属性设为返回true的getter，或者直接赋值为true的只读属性，既消除冗余，语义也更清晰：

@Directive({ selector: '[appFieldLabel]', })
export class FieldLabelDirective {
  @Input() tooltip: string;
  @Input() showOptional = true;
  
  // 使用getter返回true，后续如果需要动态控制也方便修改
  @HostBinding('class.text-truncate') get isTextTruncate() {
    return true;
  }
}

或者更精简的写法（直接赋值常量）：

@Directive({ selector: '[appFieldLabel]', })
export class FieldLabelDirective {
  @Input() tooltip: string;
  @Input() showOptional = true;
  
  @HostBinding('class.text-truncate') readonly isTextTruncate = true;
}

方法二：在指令元数据的host中直接指定类 #

如果这个CSS类是固定始终要添加的，推荐直接在@Directive装饰器的host配置里定义，这种方式代码最简洁直观：

@Directive({ 
  selector: '[appFieldLabel]',
  // 直接在host中声明要绑定的CSS类
  host: {
    'class': 'text-truncate'
  }
})
export class FieldLabelDirective {
  @Input() tooltip: string;
  @Input() showOptional = true;
}

两种方式都能达到让text-truncate类始终生效的目的：如果以后需要动态控制类的显示/隐藏，方法一的getter模式更易修改；如果类完全固定不变，方法二更适合。

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