1

Me gustaría poder llamar a los métodos que tiene un componente hijo desde otro componente que es hijo del mismo padre pero a un nivel mas bajo. Visto esquematicamente:

           |--Hijo B
 Padre A---|
           |--Hijo C---|--Hijo D   

A es el padre de todos y tiene dos hijos B y C. C es a la vez el padre de D.

En mi aplicación de Angular el componente B posee una instancia de un mapa y funciones para manejar dicho mapa. C es un componente router que va cambiando el componente D según la aplicación lo requiera.

Componente A

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

}

HTML componente A

<ng-container>
   <mat-sidenav-container> 
      <mat-sidenav>
         <!--Componente C-->
          <router-outlet></router-outlet>
      </mat-sidenav>
      <mat-sidenav-content >
        <!--Componente B-->
        <app-map></app-map>
      </mat-sidenav-content>
   </mat-sidenav-container>
</ng-container>

Componente B

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


    export class MapComponent implements OnInit {
      ngOnInit(){...}
      dibujarCapaWMS(nombreCapa:string){...}
      borrarCapaWMS(){...}
      dibujarCoordenadas(coordenadas:any){...}
      obtenerMapaDeIDENA(){...}
      //......//
    }

HTML componente B

<div id="map" class="map"></div> <!--Openlayers map-->

Componente C

const routes: Routes = [
  { path: '', redirectTo: '/inicio', pathMatch: 'full' },
  { path: 'inicio', component: PaginaInicioComponent },
  { path: 'edificios', component: EdificiosComponent },
  { path: 'parkings', component: ParkingsComponent },
  //..........//
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

El componente D es cambiado por el router (uno de ellos)

@Component({
  selector: 'app-edificios',
  templateUrl: './edificios.component.html',
  styleUrls: ['./edificios.component.css']
})
export class EdificiosComponent implements OnInit {
  //........//
 /* Quiero llamar a las funciones de MapComponent desde aqui */
}

El componente B siempre es el mismo, y solamente modifica los valores de sus atributos mediante sus funciones. Se trata de una aplicación "tipo Google Maps" en la que el mapa es el mismo y va cambiando según que le mande que haga el componente D.

8
  • Si, he visto el artículo, pero ahi dice cómo compartir datos entre componentes. Lo que me gustaría es llamar a un método de otro componente cuando son parientes. Commented el 27 mar. 2019 a las 9:28
  • El componente A tendrá que hacer de director de orquesta, escuchando a un hijo para modificar los inputs del otro. Llamar a métodos directamente no lo recomendaría, creas una dependencia bidireccional que te puede causar más problemas. En su lugar es mejor escuchar eventos y actuar Commented el 27 mar. 2019 a las 9:30
  • Pero B tiene muchos métodos, ya que en él estoy trabajando con un mapa y tendría funciones para pintar capas, borrarlas, hacer peticiones a servidores etc. Crees que sería mejor hacer un switch muy grande en A que eligiera a que métodos de B llamar en funcion del mensaje que le pase el hijo C a traves de D, en vez de que D llamara directamente a los métodos de B? Commented el 27 mar. 2019 a las 9:43
  • 1
    Sin ver el código no puedo dar una respuesta. Quizá un servicio intermedio sea lo que necesitas: un componente llama a métodos del servicio, y el otro escucha diferentes eventos emitidos por dicho servicio. De ese modo rompes la dependencia entre componentes: si uno de ellos no existe, el otro sigue funcionando (emitiendo aunque no se le escuche, o escuchando aunque nadie mande nada) Commented el 27 mar. 2019 a las 9:46
  • Te recomiendo leerte el recorrido de bienvenida para entender cómo funciona el sitio y qué es un ejemplo mínimo verificable Commented el 27 mar. 2019 a las 9:49

1 respuesta 1

2

Yo usaría un servicio para comunicar los elementos, porque no tienen una relación directa entre sí y sobrecargar la lógica de sus respectivos padres complicaría mucho el código. Te pongo un ejemplo básico:

@Injectable()
export class MessageService {

    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

En tu caso, si quieres evitar un switch para ver qué tipo de mensaje es, podrías crear varios Subjects (para cada tipo de evento), y tus componentes podrían enviar/escuchar diferentes tipos de mensajes en diferentes métodos:

@Injectable()
export class MessageService {

    private subjectAccion1 = new Subject<any>();

    private subjectAccion2 = new Subject<any>();

    hazAccion1(message: string) {
        this.subjectAccion1.next({ text: message });
    }

    hazAccion2(message: string) {
        this.subjectAccion2.next({ text: message });
    }

    escucharAccion1(): Observable<any> {
        return this.subjectAccion1.asObservable();
    }

    escucharAccion2(): Observable<any> {
        return this.subjectAccion2.asObservable();
    }

    ...

}

Entonces el componente que espera órdenes se suscribiría al servicio:

constructor(private msgService: MessageService) { }

ngOnInit() {
  this.observer1 = msgSer.escucharAccion1().subscribe(mensaje => this.cambiarAlgo1(mensaje));
  this.observer2 = msgSer.escucharAccion2().subscribe(mensaje => this.cambiarAlgo2(mensaje));
  //...
}

ngOnDestroy() {
  this.observer1.unsubscribe();
  this.observer2.unsubscribe();
}

¡No te olvides cancelar la subscripción o tendrás memory-leaks!

1
  • Muchas gracias. Me has hecho un gran favor resolviéndome esto. Commented el 27 mar. 2019 a las 19:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.