Angular2 warum @Output über @Input für Rückrufe verwenden

Question

Ich lerne Angular2, nach der Arbeit mit Angular1 für ein paar Jahre. Ich erstelle eine Kreditkartenform-Komponente, mit dem Hauptziel, ein paar Schlüsselkonzepte in Angular2 zu lernen. Die Komponente sollte alle Formatierungen verarbeiten und ein Stripe-Token über einen Rückruf zurückgeben. Ich erkannte, dass ich Callbacks auf zwei Arten bearbeiten kann.

einen @Output Parameter Mit

In meiner Komponente I eine Ausgangsgröße zu definieren und es wie in diesem Beispiel verwenden:

export class CreditCardForm{ 
    .... 
    @Output() callback = new EventEmitter(); 
    .... 

    doCallback(){ 
     this.callback.emit({data: 123}); 
    } 
} 

// Parent view 
<credit-card-form (callback)="creditCardCallback($event)"></credit-card-form> 

Mit einer @Input Variable

jedoch , Könnte ich die Callback-Methode (creditCardCallback, die in der übergeordneten Vorlage verwendet wird) einfach an eine Eingabevariable übergeben, beispielsweise:

export class CreditCardForm{ 
    .... 
    @Input() callback; 
    .... 

    doCallback(){ 
     this.callback({data: 123}); 
    } 
} 

// Parent view 
<credit-card-form [callback]="creditCardCallback"></credit-card-form> 

Die Frage

Warum sollte ich @Output über @Input verwenden? Was erreiche ich mit @Output Variablen statt? Soweit ich sehen kann, fügt dies nur einen Overhead hinzu, indem man die Klasse EventEmitter nutzt.

Answer 1

Es gibt immer mehr als eine Möglichkeit, die Katze zu häuten. Doch meiner Meinung nach, hat @Output mit folgenden Vorteilen:

• Lesbarkeit des Codes: Es ist einfacher, den Datenfluss zu wissen, ob den empfohlene Stil verwenden.

• De-Kopplung: Zum Beispiel für die normale @Output Ereignis in Ihrem ParentComponent, können Sie mehr Flexibilität, um die geschickte Falle Umgang haben:

• Last but not least - es ermöglicht Banane in die Box Syntax: Sagen Sie in Ihrem ChildComponent Sie haben:

@Input() creditCardValue: string; @Output() creditCardValueChange: EventEmitter<string>;

Dann können Sie Zwei-Wege leicht in Ihrer ParentComponent Bindung haben:

<credit-card-form [(creditCardValue)]="creditCardVal"></credit-card-form> 

Answer 2

Imho, @Output ist ein riesig Designfehler, da Sie nicht auf das Ergebnis reagieren kann, oder die Handhabung davon. Das erste Beispiel für diesen Fehler ist der Klick auf eine Schaltfläche. Wenn Sie darauf klicken, sollte die Schaltfläche in 99% der Fälle deaktiviert werden, wenn die Aktion ausgeführt wird. Sobald die Aktion abgeschlossen ist, sollte die Schaltfläche erneut aktiviert werden. Dies möchten Sie im Element selbst und nicht im übergeordneten Element behandeln. Mit @Output können Sie dies nicht tun. Mit einer Aktionsfunktion wie @Input können Sie dies tun! Und wenn Ihre Aktionsfunktion Observable oder Promise zurückgibt, können Sie leicht darauf warten. Das Erstellen einer benutzerdefinierten Anweisung, die diese Deaktivierung behandelt, ist einfach, und Sie können [klick] überall verwenden und es wird sich so verhalten.

EDIT: Ich sage nicht, @Output nicht, dass es Anwendungen hat, aber nicht für Aktionen müssen Sie auf etc warten .... Benennen @Input gut ist, verdeutlicht auch den Fluss, wie onDelete etc ...