So aktualisieren Sie 2 Ansichten mit verschiedenen Parametern von 1 Controller

Question

Sagen wir haben Eltern-Controller "P" und 2 Kinder: "A" und "B".

"A" Controller hat Eingang und in "P" Vorlage zweimal mit anderen Parametern verwendet:

<A-app [input]='param1'></A-app> 
    <A-app [input]='param1'></A-app> 
    <B-app (flag)="onClick($event)"></B-app> 

"B" Steuerung eine Taste enthält. Wenn ich in "B" Vorlage auf diese Schaltfläche klicken, emittiere ich von "B" -Controller eine "Flagge", die onClick($event) in einem "P" -Steuergerät auslöst.

Dieser onClick($event) gewidmet Wert ändern in "A" Steuerung über @ViewChild Funktionsaufruf von "A" Controller (wie folgt aus: this.componentA.changeAPar();)

Also muss ich Wert ändern in "A" Steuerung per Klick auf die Schaltfläche in "B" Controller-Vorlage.

Diese Regelung nur mit einer Verwendung eines Wählers funktioniert gut:

<A-app [input]='param1'></A-app> //<---- 1 usage 
    <B-app (flag)="onClick($event)"></B-app> 

Wenn ich Wähler 2-mal verwenden, dann Parameteraktualisierungen, aber nur in einem ersten Fall macht.

Wie funktioniert das?

Update: die gleiche Wirkung, wenn ich eine Abkürzung in einer "P" Vorlage verwenden, um eine Verbindung "A" und "B":

<A-app #a-app [input]='param1'></A-app> 
<A-app #a-app [input]='param1'></A-app> 
<B-app (flag)="#a-app.changeAPar()"></B-app> 

Answer 1

Ich glaube, hier für das, was Sie suchen, ist die OnChanges Lebenszyklus-Haken. In Ihrer Komponente "A" können Sie Änderungen, die am Parameter input vorgenommen werden, abonnieren und entsprechend reagieren. Es würde wie folgt aussehen:

import {Component, Input, OnChanges} from '@angular/core'; 

@Component({ 
    selector: 'A', 
    moduleId: module.id, 
    template: `// omited for brevity` 
}) 

export class AComponent implements OnChanges { 
    @Input() input: string; 

    ngOnChanges(changes: { [propName: string]: any }) { 
     if (changes['input'] && changes['input'].currentValue) { 
      // handle change 
     } 
    } 
} 

Komponente B

import {Component, Output} from '@angular/core'; 

@Component({ 
    selector: 'B', 
    moduleId: module.id, 
    template: `// omited for brevity` 
}) 

export class BComponent { 
    @Output() onClick = new EventEmitter<string>(); 

    click(aValue: string):void { 
     this.onClick.emit(aValue); 
    } 
} 

geordnete Komponente

import {Component} from '@angular/core'; 
import {AComponent, BComponent} from '...' 

@Component({ 
    selector: 'P', 
    moduleId: module.id, 
    template: ` 
     <A [input]='param1'></A-app> 
     <A [input]='param1'></A-app> 
     <B (onClick)="onClick($event)"></B-app>` 
}) 

export class PComponent { 
    param1: string = ''; 

    onClick(aValue: string):void { 
     this.param1 = aValue; 
    } 
} 

Auf diese Weise alle zu input Änderungen in der übergeordneten Komponente wird abgefangen und behandelt werden ngOnChanges.

HINWEIS: Aus dem Speicher geschrieben und nicht getestet.