chiamare un metodo del componente figlio

Question

ho un componente figlio nidificato in questo modo:

<app-main> 
    <child-component /> 
</app-main> 

mio componente appMain ha bisogno di invocare un metodo su bambini-componente.

Come richiamare un metodo sul componente figlio?

Answer 1

È possibile ottenere un riferimento a un elemento utilizzando

@ViewChild('childComponent') child; 

dove childComponent è una variabile di modello <some-elem #childComponent> `o

@ViewChild(ComponentType) child; 

dove ComponentType è il tipo di un componente o di una direttiva e poi in ngAfterViewInit o un gestore di eventi chiama child.someFunc().

ngAfterViewInit() { 
    console.log(this.child); 
} 

Vedi anche get hold of an element in the template

Answer 2

Padre e figlio possono comunicare tramite associazione dati.

Esempio:

@Component({ 
    selector: 'child-component', 
    inputs: ['bar'], 
    template: `"{{ bar }}" in child, counter {{ n }}` 
}) 
class ChildComponent{ 
    constructor() { 
     this.n = 0; 
    } 
    inc() { 
     this.n++; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <child-component #f [bar]="bar"></child-component><br> 
     <button (click)="f.inc()">call child func</button> 
     <button (click)="bar = 'different'">change parent var</button> 
    `, 
    directives: [ChildComponent] 
}) 
class AppComponent { 
    constructor() { 
     this.bar = 'parent var'; 
    } 
} 

bootstrap(AppComponent); 

Demo

#f crea un riferimento al componente figlio e può essere utilizzato in modello o passato alla funzione. I dati dal genitore possono essere passati dal binding [ ].

Answer 3

Essendo un componente figlio

@Component({ 
    // configuration 
    template: `{{data}}`, 
    // more configuration 
}) 
export class Son { 

    data: number = 3; 

    constructor() { } 

    updateData(data:number) { 
    this.data = data; 
    } 

} 

Avere un componente padre

@Component({ 
    // configuration 
}) 
export class Parent { 
    @ViewChild(Son) mySon: Son; 

    incrementSonBy5() { 
    this.mySon.updateData(this.mySon.data + 5); 
    } 
} 

Nel modello del padre

<son></son> 
<button (click)="incrementSonBy5()">Increment son by 5</button> 

Questa soluzione funziona solo per un'istanza <son></son> nel modello principale. Se hai più di un'istanza funzionerà solo nel primo modello.

Answer 4

Il modo migliore per accedere a un componente figlio è @ViewChild.

Supponiamo che tu abbia AppMainComponent con un componente figlio nidificato dal tuo esempio.

// app-main.component.ts 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-main', 
    template: ` 
     <child-component /> 
    ` 
}) 

export class AppMainComponent {} 

Si desidera richiamare un metodo chiaro da ChildComponent.

// child.component.ts 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'child-component', 
    template: '{{ greeting }}' 
}) 

class ChildComponent { 
    greeting: String = 'Hello World!'; 

    clear() { 
     this.greeting = null; 
    } 
} 

Si può realizzare importando la classe ChildComponent, ViewChild decoratore e passare di classe del componente in esso come una query. In questo modo, avresti accesso all'interfaccia di ChildComponent memorizzata nella variabile personalizzata.Ecco un esempio:

// app-main.component.ts 
import { Component, ViewChild } from '@angular/core'; 
import { ChildComponent } from './components/child/child.component'; 

@Component({ 
    selector: 'app-main', 
    template: ` 
     <child-component /> 
    ` 
}) 

class ChildComponent { 
    @ViewChild(ChildComponent) 
    child: ChildComponent; 

    clearChild() { 
     this.child.clear(); 
    } 
} 

Avviso! La visualizzazione figlio diventa disponibile solo dopo ngAfterViewInit.

Risposta dopo Angolare inizializza le viste del componente e le viste secondarie. Chiamato una volta dopo il primo ngAfterContentChecked(). Un hook solo componente.

Se si desidera eseguire il metodo automaticamente, è necessario farlo all'interno di questo hook ciclo di vita.

È inoltre possibile ottenere un QueryList di componenti figlio tramite il decoratore ViewChildren.

import { Component, ViewChildren, QueryList } from '@angular/core'; 
import { ChildComponent } from './components/child/child.component'; 

... 

@ViewChildren(ChildComponent) 
children: QueryList<ChildComponent>; 

QueryList potrebbe essere molto utile, ad es. puoi iscriverti alle modifiche dei bambini.

È anche possibile creare template reference variables e accedervi tramite il decoratore ViewChild.