指令中的Angular 2+附加类

你现在实际做的是绑定到class属性,所以基本上这个值是 set 到 this.class ,这很好。然而,事实证明,实际上并不是从“class”属性中获得初始值,这意味着无论设置什么 class 要在模板上显示,该值将始终被覆盖。基本上,Angular正在接管设置 班 属性

所以,你要做的就是在 班 属性实际上,你可以考虑 html 属性作为组件/指令的输入,唯一需要做的就是用 @Input 室内装修设计师在这里,我们保存了 班 把某事归因于某人 defaultClassList 然后用它来计算新的 班 属性值,因此您的代码可以如下所示:

export class AppendBusinessLogicClass {
    readonly prefix = 'prefix';

    @Input('class')
    defaultClassList;// `class` is a keyword so we're calling it defaultClassList instead

    @HostBinding('class')
    classList;// `class` is a keyword so we're calling it classList instead

    @Input('appendBusinessLogicClass') set appendBusinessLogicClass(variable: string) {
        this.classList = this.defaultClassList + " " + this.prefix + '-' + variable;
    }
}

总而言之,您最终得到了模板中定义的属性值,并将其包含在绑定中 this.classList 只要设置了传递给指令的值。