Angular 2 - Come attivare un metodo su un figlio dal genitore

Question

È possibile inviare dati dal genitore a un figlio tramite @Input, o chiamare un metodo sul genitore dal figlio con @Output, ma I ' Mi piace fare esattamente il contrario, che sta chiamando un metodo sul bambino dal genitore. Fondamentalmente qualcosa di simile:

@Component({ 
    selector: 'parent', 
    directives: [Child], 
    template: ` 
<child 
    [fn]="parentFn" 
></child> 
` 
}) 
class Parent { 
    constructor() { 
    this.parentFn() 
    } 
    parentFn() { 
    console.log('Parent triggering') 
    } 
} 

e il bambino:

@Component({ 
    selector: 'child', 
    template: `...` 
}) 
class Child { 
    @Input() 
    fn() { 
    console.log('triggered from the parent') 
    } 

    constructor() {} 
} 

Lo sfondo è un tipo di richiesta "get", vale a dire per ottenere lo status di up-to-date dal bambino.

Ora so che potrei ottenere ciò con un servizio e soggetto/osservabile, ma mi chiedevo se non c'è qualcosa di più semplice?

Answer 1

Penso che questi potrebbe essere quello che stai cercando:

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

È possibile accedere a proprietà e metodi del bambino utilizzando le variabili locali all'interno del modello o utilizzando il @ViewChild decoratore nella classe componente del genitore.

Answer 2

@ViewChild è la soluzione giusta, ma la documentazione di cui sopra è stata un po 'oscura per me, quindi passo una spiegazione un po' più amichevole che mi ha aiutato a capirlo.

Diamo uno ChildComponent con un metodo:

whoAmI() { 
    return 'I am a child!!'; 
} 

E la componente principale, dove siamo in grado di chiamare il metodo di cui sopra, utilizzando '@ tecnica ViewChild`:

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

import { ChildComponent } from './child.component'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 

    @ViewChild(ChildComponent) child: ChildComponent; 

    ngOnInit() { 
    console.log(this.child.whoAmI()); // I am a child! 
    } 
}