Come trasmettere un evento da genitore a figlio?

Attualmente sto usando Angular 2. Di solito usiamo @Output() addTab = new EventEmitter<any>();e poi addTab.emit()per emettere un evento al componente genitore.

C'è un modo per farlo vice cersa, da genitore a figlio?

Usando RxJs , puoi dichiarare a Subjectnel tuo componente genitore e passarlo come Observablecomponente figlio, il componente figlio deve solo iscriverti a questo Observable.

Parent-Componente

eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next();
}

Parent-HTML

<child [events]="eventsSubject.asObservable()"> </child>    

Child-Componente

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}

Per quanto ne so, ci sono 2 modi standard per farlo.

1. @Input

Ogni volta che i dati nel genitore cambiano, il bambino ne viene informato nel metodo ngOnChanges. Il bambino può agire di conseguenza. Questo è il modo standard di interagire con un bambino.

Parent-Component
public inputToChild: Object;

Parent-HTML
<child [data]="inputToChild"> </child>       

Child-Component: @Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }){
   // Extract changes to the input property by its name
   let change: SimpleChange = changes['data']; 
// Whenever the data in the parent changes, this method gets triggered. You 
// can act on the changes here. You will have both the previous value and the 
// current value here.
}

2. Concetto di servizio condiviso

Creazione di un servizio e utilizzo di un osservabile nel servizio condiviso. Il bambino si iscrive e ogni volta che c'è un cambiamento, il bambino verrà avvisato. Questo è anche un metodo popolare. Quando vuoi inviare qualcosa di diverso dai dati che passi come input, questo può essere usato.

SharedService
subject: Subject<Object>;

Parent-Component
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);

Child-Component
constructor(sharedService: SharedService)
this.sharedService.subject.subscribe((data)=>{

// Whenever the parent emits using the next method, you can receive the data 
in here and act on it.})

In un componente padre è possibile utilizzare @ViewChild () per accedere al metodo / variabile del componente figlio.

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
} 

Aggiornare:

Angolare 8 in poi -

@ViewChild(NumberComponent, { static: false })

Utilizzare il decoratore @Input () nel componente figlio per consentire al genitore di collegarsi a questo input.

Nel componente figlio lo dichiari così com'è:

@Input() myInputName: myType

Per legare una proprietà da genitore a figlio devi aggiungere nel tuo template le parentesi di legame e il nome del tuo input tra di loro.

Esempio :

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

Ma attenzione, gli oggetti vengono passati come riferimento, quindi se l'oggetto viene aggiornato nel figlio, la variabile del genitore sarà troppo aggiornata. Questo potrebbe portare a comportamenti indesiderati a volte. Con i tipi primari il valore viene copiato.

Per andare oltre, leggi questo:

Documenti: https://angular.io/docs/ts/latest/cookbook/component-communication.html

All'interno del genitore, puoi fare riferimento al bambino utilizzando @ViewChild. Quando necessario (cioè quando l'evento verrebbe attivato), puoi semplicemente eseguire un metodo nel figlio dal genitore usando il riferimento @ViewChild.