Que un componente acceda a su componente padre en Angular es más fácil de lo que parece.

Recordemos existe un inyector para cada componente, y en Angular se genera una estructura arbórea de inyectores similar al archiconocido Component Tree. Cuando le pedimos al inyector (vía constructor) que nos dé un determinado servicio o directiva que no contiene, solicita dicha instancia a su padre. Si éste no lo tiene, la petición se propaga hacia arriba hasta llegar al Root Injector.

Además, el inyector de cada componente contiene una instancia del propio componente. Así, si en un componente solicitamos una instancia de un componente padre, al realizar este recorrido hacia arriba, enseguida nos toparemos con la instancia de su componente padre.

En esta URL vemos un sencillo proyecto que prueba precisamente esto. Por un lado tenemos un componente padre, que expone un método sayHello:

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  sayHello() {
    alert('hello from parent component!');
  }
}

En el constructor del hijo inyectaremos el padre y llamaremos a su método sayHello una vez inicializado:

import {Component, OnInit} from '@angular/core';
import {ParentComponent} from '../parent.component';

@Component({
  selector: 'app-child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  constructor(private parent: ParentComponent) {
  }

  ngOnInit() {
    this.parent.sayHello();
  }
}

Este comportamiento es válido para acceder a cualquier elemento antecesor y no sólo al padre. Y podemos verlo en el componente GrandsonComponent.

Fuente: documentación oficial de Angular.

Anuncios