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.