Angular2. Kann ich ViewChild und @Input gleichzeitig verwenden?

Question

Ich muss einige Daten in Kindelement übertragen und Funktion darin ausführen. Ich verwende ViewChild für den Zugriff auf die Funktion. Aber in Kind childParam immer noch undefiniert.

Eltern Vorlage:

<my-modal #myModal [childParam]="parentParam"></my-modal> 

Geordnete Komponente:

@ViewChild('myModal') myModal; 
parentParam: any; 

onSubmit(value: any){ 
    this.parentParam = value; 
    this.myModal.modalShow(); 
} 

Kinder Komponente:

@Input() childParam: any; 

modalShow(){ 
    console.log(this.childParam); 
} 

Warum childParam nicht definiert ist?

Was ist besser: Änderung direkt childParam von ViewChild:

this.myModal.childParam = 'test string'; 

oder senden Daten über Funktionsparameter:

this.myModal.modalShow('test string'); 

Answer 1

Wenn this.parentParam = value; in onSubmit() dann Angular ersten Bedürfnissen ausgeführt Änderungserkennung läuft für Bindungen aktualisiert.

Angular Läufe ändern Erkennung, wenn eine Ereignisbehandlungsroutine abgeschlossen hat. Was in Ihrem Fall ist onSubmit() was bedeutet, dass childParam die value bestanden nachonSubmit() wurde ausgeführt erhalten.

Was Sie tun können, ist Änderungserkennung explizit

constructor(private cdRef:ChangeDetectorRef) {} 

    onSubmit(value: any){ 
    this.parentParam = value; 
    this.cdRef.detectChanges(); 
    // here `value` is assigned to `childParam` 
    this.myModal.modalShow(); 
    } 

Plunker example

Answer 2

Sie brauchen nicht das Kind Parameter durch einen @ViewChild Bezug zu setzen .

Versuchen Sie es stattdessen. Übergeordnete Vorlage:

<my-modal #myModal [childParam]="parentParam"></my-modal> 

Mutter Komponente:

private parentParam: any; 

onSubmit(value: any){ 
    this.parentParam = value; 
    this.myModal.modalShow(); 
} 

Der Wert von parentParam bindet an dem childParam Wert direkt auf diese Weise so, wenn der parentParam Wert aktualisiert wird, wird es in der untergeordneten Komponente zur Verfügung steht.

Wenn das nicht funktioniert, dann versuchen und ngOnChanges des Kind Komponente hinzuzufügen, da Sie dann in der Lage sein werden, zu debuggen (einen Haltepunkt gesetzt) ​​für, wenn der Wert der Mutter aktualisiert:

Import OnChanges (fügen Sie diese zusätzlich zu den Einfuhren aus anderen Ländern haben Sie von @ Winkel/Kern):

import { OnChanges} from '@angular/core'; 

NgOnChanges Ihr Kind Komponentenklasse hinzufügen:

export class MyChildComponent implements OnChanges { 

Umset t Methode ngOnChanges. Diese Methode wird aufgerufen, wenn ein Eingabeparameter geändert wird:

ngOnChanges(changes: any) { 
    debugger; //set breakpoint 
}