2016-11-17 54 views
2

有兩種方法來在組件上限定的輸入:爲什麼`優於`輸入@ input`裝飾:[]`

@Component({ 
    inputs: ['displayEntriesCount'], 
    ... 
}) 
export class MyTable implements OnInit { 
    displayEntriesCount: number; 

@Component({ 
    ... 
}) 
export class MyTable implements OnInit { 
    @Input() displayEntriesCount: number; 

我假設第一種方法更好,因爲它明確聲明瞭組件的依賴關係,而不需要檢查補充類。然而,this article由著名開發商指出,第二種方法是可取:

使用@input是首選的方法,但我們沒有使用它。

任何想法爲什麼?

回答

2

每角風格指南https://angular.io/docs/ts/latest/guide/style-guide.html#!#-a-id-05-12-a-decorate-input-and-output-properties-inline

裝飾輸入輸出特性內嵌

不要使用@input和@Output代替輸入和輸出特性的@Directive的 和@ Component`裝飾者:

將@Input()或@Output()放置在它們裝飾的屬性 所在的同一行上。

  • 爲什麼?識別類中的哪些屬性是輸入或輸出更容易且更易讀。

  • 爲什麼?如果您需要重命名與@Input或@Output關聯的屬性或事件名稱,則可以將其修改爲一個位置。

  • 爲什麼?附加到指令的元數據聲明更短,因此更具可讀性。

  • 爲什麼?將裝飾器放在同一條線上可以縮短代碼,並且仍然可以輕鬆地將該屬性標識爲輸入或輸出。

3

它在某種程度上受到風格指南的偏好,但沒有強有力的論據。 也許是因爲屬性和方法與綁定一起保存。 但是你的論點也是有效的。有些喜歡一個,一個喜歡另一個。

如果你更喜歡host: ...那麼就使用它。這仍然很常見。

+0

謝謝,不明白'host:...',你能否詳細說明一下? –

+0

對不起,在閱讀你的問題時沒有引起足夠的重視。 ''host'與像'@HostBinding()'和'@HostListener()'(除了@Input()'和'@Output()')類似的'inputs'和'outputs'類似於'inputs'和'outputs'。我說的應用相同的'輸入','輸出'和'主機' –

+0

瞭解它,非常感謝 –

相關問題