大家好，我希望你們最近過得很好 我正在通過一本書學習 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 中的指令那樣預先宣告它們嗎？
uj5u.com熱心網友回復：
不需要指令選擇器[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 標簽通常是烤肉串大小寫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/534071.html