2016-11-17 2 views
2

Es gibt zwei Möglichkeiten, um eine Eingabe an einer Komponente zu definieren:Warum ist `@ input` Dekorateur über` Eingänge bevorzugt: [] `

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

und diese

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

Ich würde davon ausgehen, dass Der erste Ansatz ist besser, da die Abhängigkeiten der Komponenten explizit deklariert werden, ohne dass die Complement-Klasse überprüft werden muss. Allerdings heißt es this article von dem bekannten Entwickler, dass der zweite Ansatz vorzuziehen ist:

Mit @Input ein bevorzugter Ansatz ist jedoch wir es nicht verwenden.

Irgendwelche Ideen warum?

Antwort

2

Per Winkel Style Guide https://angular.io/docs/ts/latest/guide/style-guide.html#!#-a-id-05-12-a-decorate-input-and-output-properties-inline

Verzieren Input- und Output-Eigenschaften Inline

Sie @Input und @Output anstelle der Eingänge verwenden und gibt Eigenschaften der @Directive und @ Component` Dekoratoren:

Platzieren Sie die @Input() oder @Output() in der gleichen Zeile wie die Eigenschaft sie dekorieren.

  • Warum? Es ist einfacher und lesbarer zu identifizieren, welche Eigenschaften in einer Klasse Eingaben oder Ausgaben sind.

  • Warum? Wenn Sie den mit @Input oder @Output verbundenen Eigenschaften- oder Ereignisnamen umbenennen müssen, können Sie ihn an einer Stelle ändern.

  • Warum? Die der Anweisung zugeordnete Metadaten-Deklaration ist kürzer und somit besser lesbar.

  • Warum? Platzieren Sie den Dekorator in derselben Zeile, ist der Code kürzer und die Eigenschaft kann trotzdem als Eingabe oder Ausgabe identifiziert werden.

3

Es ist irgendwie von der Styleguide bevorzugt, aber es gibt keine starken Argumente. Vielleicht, weil die Eigenschaften und Methoden zusammen mit der Bindung gehalten werden. Aber Ihr Argument ist auch gültig. Manche bevorzugen den einen, manche den anderen.

Wenn Sie host: ... bevorzugen, dann verwenden Sie es einfach. Es ist immer noch ziemlich üblich.

+0

danke, verstand nicht über 'host: ...', können Sie das näher erläutern? –

+0

Sorry, habe beim Lesen deiner Frage nicht genug Aufmerksamkeit geschenkt. 'host' ist ein ähnlicher Parameter wie' inputs' und 'outputs' mit Dekoratoren wie' @HostBinding() 'und' @HostListener() '(zusätzlich zu' @Input() 'und' @Output() '). Was ich sagte, gilt das gleiche für "Eingänge", "Ausgänge" und "Host" –

+0

habe es, vielen Dank –

Verwandte Themen