Angular 2+ 在指令中追加 class

Question

我有 Angular 6.0.0 应用程序。需要将 class 动态附加到 html 元素。理想情况下，这应该通过指令实现。目前我有这样的东西，它工作正常。

<div class="class1 prefix-{{variable}}"></div>

我想让前缀可重用，我正在尝试通过使用指令来达到更好的结果：

html:

<div class="class1" [appendBusinessLogicClass]="variable"></div>

appendBusinessLogicClass.directive.ts:

export class AppendBusinessLogicClass {
readonly prefix = 'prefix';
  @HostBinding('class') class = ''; // this clears the html class1
  @Input('appendBusinessLogicClass') set appendBusinessLogicClass(variable: string) {
      this.class = this.prefix + '-' + variable;
   }
}

但是 html 代码中的 HostBinding 清除 class1。但我想将 'prefix-rand' 附加到 class 列表。请注意，我们在编译时不知道 variable。

谢谢

Answer 1

你现在实际做的是绑定到 class 属性，所以基本上值将是 set 到 this.class，这完全没问题。但是，事实证明您实际上并没有从 'class' 属性获取初始值，这意味着无论您在模板上设置 class 什么，该值总是会被覆盖。所以基本上 Angular 接管 class 属性的设置。

因此，您需要做的是在 class 属性中获取该值的引用。在 Angular 中，您实际上可以将任何 html 属性视为 component/directive 的输入，您唯一需要做的就是用 @Input 装饰器对其进行注释。这里我们将 class 属性的值保存到 defaultClassList，然后使用它来计算新的 class 属性值，因此您的代码可能如下所示：

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 中。

Angular 2+ 在指令中追加 class

Angular 2+ append class in directive

angular

angular-directive

angular2-hostbinding