@Input和@Output装饰器的参数在angular中有什么用?

Question

大家好，希望大家都过得好最近我正在通过一本书学习angular，并且遇到了自定义指令，@Input和@Output装饰器，我完全理解如何很好地使用这些装饰器唯一让我感到困惑的是@Input和@Output装饰器中传递的参数这里是这本书的代码

import { Directive, ElementRef, Input, SimpleChanges, Output, EventEmitter } from "@angular/core";
import { Product } from "./product.model";
@Directive({
selector: "[pa-attr]"
})
export class PaAttrDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.addEventListener("click", () => {
if (this.product != null) {
this.click.emit(this.product.category);
}
});
}
@Input("pa-attr")
bgClass: string | null = "";
@Input("pa-product")
product: Product = new Product();
@Output("pa-category")
click = new EventEmitter<string>();
ngOnChanges(changes: SimpleChanges) {
let change = changes["bgClass"];
let classList = this.element.nativeElement.classList;
if (!change.isFirstChange() && classList.contains(change.previousValue)) {
classList.remove(change.previousValue);
}
if (!classList.contains(change.currentValue)) {
classList.add(change.currentValue);
}
}
}

应用后者的模板如下:

<tbody>
<tr *ngFor="let item of getProducts(); let i = index"
[pa-attr]="getProducts().length < 6 ? 'table-success' : 'table-warning'"
[pa-product]="item" (pa-category)="newProduct.category = $event">
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
<td [pa-attr]="item.category == 'Soccer' ? 'table-info' : null">
{{item.category}}
</td>
<td [pa-attr]="'table-info'">{{item.price}}</td>
</tr>
</tbody>

所以我的问题是:第二个@Input和@Output中的参数没有像第一个@Input中的参数一样在任何地方声明，所以这两个参数的用途是什么?

也允许我们在这些装饰器中使用任何参数，而不像第一个@Input中的指令那样预先声明它们吗?

Answer 1

指令选择器[pa-attr]不需要匹配输入参数，它只是一个快捷方式，你不需要额外的选择器添加到你的html代码中，它使一个输入基本上是必需的，因为如果它不存在，指令将不会被附加。

假设你的选择器看起来像这样，其余的代码是相同的，你的html看起来像这样:

@Directive({
selector: "my-directive"
})
<tbody>
<tr *ngFor="let item of getProducts(); let i = index"
my-directive
[pa-attr]="getProducts().length < 6 ? 'table-success' : 'table-warning'"
[pa-product]="item" (pa-category)="newProduct.category = $event">
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
<td [pa-attr]="item.category == 'Soccer' ? 'table-info' : null">
{{item.category}}
</td>
<td [pa-attr]="'table-info'">{{item.price}}</td>
</tr>
</tbody>

在这种情况下，即使缺少[pa-attr]，指令仍然可以附加，这可能导致其功能错误。

另外，@Input和@Output不需要参数，如果没有传递变量的名称将是组件上的输入选择器。但是在你的例子中，变量通常是驼峰式的，而html标签通常是烤肉式的。