Kommunizieren Sie zwischen zwei Kindkomponenten in Winkel 2

Question

Ich bin sehr neu in Winkel 2. Ich habe ein Problem, zwischen zwei Komponenten zu kommunizieren. Wenn ich ein Layout mit einem übergeordneten Element und einigen untergeordneten Komponenten habe, können Variablen der untergeordneten Komponenten einfach mit der @Input-Annotation festgelegt werden.

Aber jetzt habe ich ein Layout einer übergeordneten Komponente (die meist für das Layout ist) und zwei untergeordnete Komponenten:

Das Kind Komponente 2 eine Reihe von Tasten hat, die eine nur schafft einfache Nachricht. Jetzt möchte ich diese Nachricht in der untergeordneten Komponente eins anzeigen.

Wie löse ich es? Vielen Dank im Voraus

Answer 1

Sie können @ViewChild und @Output verwenden, um die Eigenschaften in der untergeordneten Komponente zu aktualisieren.

Alternativ können Sie @Input anstelle von @ViewChild verwenden.

Der von Seidme vorgeschlagene Ansatz funktioniert auch gut. Es hängt nur von Ihrem Anwendungsfall ab.

Beispiel mit @ViewChild und @Output: https://plnkr.co/edit/r4KjoxLCFqkGzE1OkaQc?p=preview

Beispiel mit @Input und @Output https://plnkr.co/edit/01iRyNSvOnOG1T03xUME?p=preview

Answer 2

Ein einfacher Weg ist, eine Ausgabe mit @Output in Ihrem Kind component2 als ein eventemitter und emittieren ein Ereignis mit der Nachricht als Daten übergeben, wenn eine Schaltfläche geklickt wird. Hören Sie sich dann dieses Ereignis in Ihrer übergeordneten Komponente an und aktualisieren Sie eine Eigenschaft, die beim Auftreten des Ereignisses als Eingabe für Ihre untergeordnete Komponente1 festgelegt wird.

Das Bild unten ist ein Beispiel, dass der Mechanismus

Answer 3

Neben den Lösungen mit dem @Input/@Output und einem übergeordneten Komponente als eine ‚Brücke‘ deutlich zeigt, würde ein gemeinsamer Weg auch eine einführen gemeinsamer Dienst Der Dienst muss in einer übergeordneten Komponente bereitgestellt werden, damit die untergeordneten Benutzer eine einzelne Instanz des Dienstes gemeinsam nutzen können (How do I create a singleton service in Angular 2?).

Grund Beispiel mit der BehaviorSubject as a delegate:

@Injectable() 
export class SharedService { 

    messageSource: BehaviorSubject<string> = new BehaviorSubject(''); 

    constructor() { } 
} 

Kinderkomponente 1:

export class ChildComponent1 { 

    constructor(private _sharedService: SharedService) { } 

    sendMessage(): void { 
     this._sharedService.messageSource.next('Hello from child 1!'); 
    } 
} 

Kinder Komponente 2:

export class ChildComponent2 { 

    constructor(private _sharedService: SharedService) { 
     this._sharedService.messageSource.subscribe((message: string) => { 
      console.log('Message: ', message); // => Hello from child 1! 
     }); 
    } 
} 

Beitrag Siehe auch: Angular2 - Interaction between components using a service

Answer 4

Sie Template-Variablen verwenden können Geschwister verweisen:

<child1 #child1></child1> 
<child2 (someOutput)="child1.doSomething($event)"></child2>