Angular 2 und EventEmitter

Question

Hallo Ich habe angefangen, Angular Studium 2. Vielleicht hat jemand mich mit meiner Frage zu EventEmitter helfen könnte und Ausgänge in Angular 2

Ich habe 3-Komponenten.

AppComponent ist das übergeordnete Element von CountriesListComponent. CountriesListComponent ist das übergeordnete Element von CountryInfoComponent AppComponent -> CountriesListComponent -> CountryInfoComponent

AppComponent hat eine eigene Funktion, um zuzuhören, wenn jemand auf ein Land klickt.

Vorlage von AppComponent ist wie folgt:

@Component({ 


template: `... 

< countries-list (OnCountrySelected)="countryWasClicked($event)" > 
< /countries-list > 
` 
... 

}) 

class AppComponent { 
countryWasClicked(country: Country): void 
    { 

    } 
} 

Die Funktion OnCountrySelected ist der Name der Ausgabe hören ich will. Aber ich kann es nur in nächsten Kind in CountriesListComponent hören, kann ich nicht? Ich möchte OnCountrySelected in der CountryInfoComponent hören. Aber ich weiß nicht, ob ich Ausgabe über einige Kinder senden kann.

Vielen Dank im Voraus!

Answer 1

Sie können Ereignisse sicher verketten, aber es ist keine bewährte Methode. diese wie in der Vorlage von CountriesListComponent: https://github.com/ngrx/store

Answer 2

Dies könnte helfen Sie finden:

@Component({ 
template: `... 
    < country-info (OnCountrySelected)="countryWasClicked($event)" > 
    < /country-info > 
` 
... 
}) 
class CountriesListComponent { 
@Output() OnCountrySelected:EventEmitter = ... 
countryWasClicked(country: Country): void 
    { 
    this.OnCountrySelected.emit(country); 
    } 
} 

Aber ich würde empfehlen, für komplexe app Zustandslogik zu verwenden (und lernen) Redux Ansatz, Sie diese verwenden können Ihre Antwort (genauer gesagt gemeinsamen Modelle oder Service-Events):

https://stackoverflow.com/a/34703015/6157104

Answer 3

Sie @Input() Dekorateur in CountryInfoCompon brauchen ent, sollte es wahrscheinlich Land nennen. und dann in CountryListComponent geben Sie das ausgewählte Land der Info-Komponente wie dieser <app-country-info [country]="selectedCountry">. Das ausgewählte Land sollte eine öffentliche Eigenschaft von CountryListComponent sein. und sein Wert kann in Ihrer Funktion festgelegt werden, die bereits zum Senden verwendet wird.

Lange Rede, kurzer Sinn, es handelt sich um eine Situation, in der ein Dekorator verwendet wird, nicht um einen Dekorierer.