在自定义属性指令和数据绑定属性指令中使用 @Attribute

Question

我是 Angular 的新手，只是一个关于在属性指令中使用 @Attribute 的问题，下面是书中的一些代码：

@Directive({

 selector: "[pa-attr]",

})

export class PaAttrDirective {

    constructor(element: ElementRef, @Attribute("pa-attr") bgClass: string) {

       element.nativeElement.classList.add(bgClass || "bg-success", "text-white");

 }

}

和模板.html：

...

<td pa-attr="bg-warning">{{item.category}}</td>

...

所以我们可以看到使用@Attribute我们可以获得属性的值，但是如果我们使用数据绑定属性指令为：

<td [pa-attr]="item.category == 'Soccer' ? 'bg-info' : null">...

然后书修改代码为：

export class PaAttrDirective {

   constructor(private element: ElementRef) {}

   @Input("pa-attr")

   bgClass: string;

   ngOnInit() {

      this.element.nativeElement.classList.add(this.bgClass || "bg-success", "text-white");

   }

}

我在这里有点困惑，我们不能使用 @Attribute 再次获取值：

export class PaAttrDirective {

    constructor(element: ElementRef, @Attribute("pa-attr") bgClass: string) {

       element.nativeElement.classList.add(bgClass || "bg-success", "text-white");

 }

}

为什么当将属性指令与数据绑定一起使用时，我们必须在代码中创建输入属性而不能使用@Attribute？

Answer 1

他们使用@Input而不是@Attribute因为：属性初始化 DOM 属性，然后它们就完成了。属性值可以改变；属性值不能。item.category == 'Soccer' ? 'bg-info' : null&nbsp;表达式更改属性值，因此您的指令在更改后不会获得更新的值。我建议在这里阅读Angular 模板语法。

Answer 2

接受简单的原始类型，例如字符串和数字 @Input：接受任何东西/一个对象，例如您自己的类对象您abc可以像这样将字符串传递给属性：<td&nbsp;pa-attr="abc"></td>您将相同的内容传递给输入，如下所示：<td&nbsp;[pa-attr]="'abc'"></td>&nbsp;<!--&nbsp;note&nbsp;the&nbsp;single&nbsp;quotes&nbsp;-->或者在 tsx&nbsp;=&nbsp;'abc';在 html 中<td&nbsp;[pa-attr]="x"></td>我不确定您是否可以在输入属性名称中使用破折号。