Angular2 dlaczego używać @Output przez @Input dla callbacków

Question

Uczę się Angular2, po pracy z Angular1 przez kilka lat. Tworzę składnik formularza karty kredytowej, którego głównym celem jest poznanie kilku kluczowych pojęć w Angular2. Komponent powinien obsłużyć całe formatowanie i zwrócić token Stripe poprzez wywołanie zwrotne. Zdałem sobie sprawę, że mogę obsługiwać wywołania zwrotne na dwa sposoby.

Użycie parametru @Output

W moim komponentu I zdefiniować zmienną wyjściową i używać go tak jak w poniższym przykładzie:

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

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

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

Korzystanie @Input zmienną

jednak Mogę po prostu przekazać metodę wywołania zwrotnego (creditCardCallback, używaną w szablonie nadrzędnym) do zmiennej wejściowej, takiej jak ta:

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

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

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

Pytanie

Dlaczego miałbym używać @Output nad @Input? Co osiągam przy użyciu zmiennych @Output? O ile widzę, to tylko dodaje obciążenie, ponieważ musi korzystać z klasy EventEmitter.

Answer 1

Zawsze istnieje więcej niż jeden sposób na skórze kota. Jednak, moim zdaniem, używając @Output ma następujące zalety:

• czytelność kodu: Łatwiej wiedzieć przepływu danych w przypadku korzystania z zalecanej styl.

• De-sprzęgło: Na przykład, dla normalnego @Output razie w swojej ParentComponent można mieć większą elastyczność obsługi wysłanej zdarzenie:

• Last but not least - umożliwia banana w składnia box: mów w ChildComponent masz:

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

Wtedy można mieć wiążący w swojej ParentComponent łatwo dwukierunkowej:

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

Answer 2

IMHO, @Output jest ogromny projekt wada, ponieważ nie można reagować na skutek lub manipulowania nim. Przykładem tej wady jest kliknięcie przycisku. Po kliknięciu przycisk powinien być wyłączony w 99% przypadków, gdy akcja ma miejsce. Po wykonaniu akcji przycisk powinien zostać ponownie włączony. To jest coś, co chcesz obsłużyć w samym elemencie, a nie w elemencie nadrzędnym. Dzięki @Output nie możesz tego zrobić. Używając funkcji działania jako @Input, możesz to zrobić! A jeśli twoja funkcja zwraca Zwiastun lub obietnicę, możesz łatwo na nią czekać. Stworzenie niestandardowej dyrektywy, która obsługuje to wyłączanie, jest łatwe, a zatem można użyć [kliknięcia] wszędzie i zachowa się w ten sposób.

EDIT: Nie mówię @Output nie ma to zastosowania, ale nie dla działań trzeba czekać na itp .... nazywania @Input s dobre, wyjaśnia również przepływ, jak onDelete etc ...