Question

我有Angular 6.0.0应用程序。需要动态地将类附加到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 CLEARS class1。但是我想将'prefix-rand'附加到班级列表中。请注意，我们在编译时不知道variable。

由于

Answer 1

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

因此，您需要做的是在class属性中获取该值的引用。在Angular中，您实际上可以将任何class属性视为组件/指令的输入，您唯一需要做的就是使用html装饰器对其进行注释。在这里，我们将@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; } }中。

Angular 2+在指令中追加类

1 个答案: