Puede obtener una referencia a un elemento usando

 @ViewChild('childComponent') child;

donde childComponent es una variable de plantilla <some-elem #childComponent >` o

 @ViewChild(ComponentType) child;

donde ComponentType es el tipo de un componente o directiva y luego en ngAfterViewInit o un controlador de eventos llama a child.someFunc() .

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

Ver también hacerse con un elemento de la plantilla

El padre y el niño pueden comunicarse a través del enlace de datos.

Ejemplo:

 @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);

Manifestación

#f crea una referencia al componente secundario y se puede usar en la plantilla o pasar a la función. Los datos del padre se pueden pasar mediante enlace [ ] .

Ser un hijo componente

 @Component({ // configuration template: `{{data}}`, // more configuration }) export class Son { data: number = 3; constructor() { } updateData(data:number) { this.data = data; } }

Tener un componente paterno

 @Component({ // configuration }) export class Parent { @ViewChild(Son) mySon: Son; incrementSonBy5() { this.mySon.updateData(this.mySon.data + 5); } }

En la plantilla del padre

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

Esta solución solo funciona para una instancia de <son></son> en la plantilla principal. Si tiene más de una instancia, solo funcionará en la primera de la plantilla.