Angular 2：什麼是@ Input/@輸出別名？

在閱讀@Input()和@Output()時，我發現我們可以使用別名而不是使用裝飾器的屬性名稱。Angular 2：什麼是@ Input/@輸出別名？

例

class ProductImage { 
    //Aliased 
    @Input('myProduct') product: string; 

    //Un-aliased 
    @Input() product: string;//not aliased 
    }

HTML

//Aliased attribute 
<SomeComponent [myProduct] = "Product Name"></SomeComponent> 

//Un-aliased attribute 
<SomeComponent [product] = "Product Name"></SomeComponent>

官方的角度documentation說：

有時候，我們希望輸入/輸出特性的公用名稱是differen t來自內部名稱。屬性指令通常是這種情況。指令消費者希望綁定到指令的名稱。例如，當我們將帶有myClick選擇器的指令應用於標記時，我們希望綁定到也稱爲myClick的事件屬性。

而且This教程簡要介紹了它：

別名讓我重寫屬性名稱是別名，而不是原來的屬性名

比，我還沒有去過其他能夠在SO上或通過Google找到別名爲@Input()和@Output()的其他內容。

事情我想知道是：

什麼是 '走樣' 試圖實現？
「別名」是我們應該經常使用的東西嗎？

來源

2016-12-25 ShadowCore

這取決於你和你的團隊風格約定 –

如果你的私人財產綁定輸入，最好遵循ts styleguiders和前綴名稱與下劃線，例如。 @Input（'heroName'） private _heroName –

這就像你的名字和你的暱稱。

在你的家人中，你可能被稱爲Nic，在你的家人之外，爲了讓其他人能合法地認識你，你應該被稱爲Nicolas。

所以，如果我們考慮類的組件，你的家庭裏：

@Coponent({ 
    selector:'my-component' 
}) 
export class MyComponent{ 
    @Output('nicolas') nic = new EventEmitter<any>(); 


    someFunction(){ 
    // because we're inside the family (inside this class), instead of nicolas , we can call nic like this : 

    this.nic ...... (which you'd normally emit an event). 

    } 

}

但是，從外面，你還是尼古拉斯，所以當有人想對你打電話（使用事件發射器）它應該使用尼古拉斯;

<my-component (nicolas)="onNicolasChanged($event)"></my-component>

請注意，我們不能做到這一點：

<my-component (nic)="onNicolasChanged($event)"></my-component>

這是別名變量。

另外，請閱讀我的回答here：

來源

2016-12-25 09:48:54 Milad

很好的解釋。請記住，角度風格指南建議我們避免使用它，除非我們真的需要它。 https://angular.io/guide/styleguide#avoid-aliasing-inputs-and-outputs –

'別名'試圖實現什麼？

它只是根據您的需要重新命名輸入/輸出變量。例如，如果有一個對象，並且它被選中，它將被傳遞給另一個組件。在這種情況下，將其稱爲selectedHero將是適當的。混淆簡單地實現了這一點。

@Input('selectedHero') hero: string;

是 '走樣' 的東西，我們應該經常使用？

取決於您正在處理的上下文。它不是必需品。例如，它可以用來避免變量名稱中的衝突或代碼的可讀性。

來源

2016-12-25 08:25:53 raj

一個很好的理由去使用它，如果你需要的組件來改變變量的名字，你並不需要，因爲它的使用，以改變它在你的模板別名。如果另一個開發人員更改該變量名，這是一種簡單的方法來防止破壞您的代碼。

來源

2017-11-26 19:59:55

Angular 2：什麼是@ Input/@輸出別名？

回答

相關問題