Tengo un componente de cuadrícula principal que contiene componentes de elementos de cuadrícula secundarios. La mayoría de los componentes de elementos de cuadrícula de mi hijo navegan a una ruta al hacer clic. Sin embargo, tengo un hijo que necesita abrir una ventana modal al hacer clic en lugar de navegar.
¿Puedo pasar a mi componente secundario una referencia a la plantilla #deactivateDialog ?
Mi uso actual de @Input route envía como una cadena, cuando necesito la plantilla en sí.
Padre:
<app-grid-item route="deactivateDialog" (navigationType)="openDialog($event)"></app-grid-item> //more app-grid-items <ng-template #deactivateDialog> //dialog markup </ng-template> openDialog(dialog) { //opening dialog }Niño:
<div (click)="navigate()"> @Input() route; @Output() navigationType = new EventEmitter(); navigate() { this.navigationType.emit(this.route); }Puede mover la lógica de navegación al archivo TypeScript y pasar 2 argumentos a la función:
<ng-template #deactivateDialog> //dialog markup </ng-template> <app-grid-item (click)="custom_function('route_to_navigate', true)"></app-grid-item> Ahora, en el archivo TypeScript, cree custom_function() que verificará si debe navegar o si debe abrir el cuadro de diálogo.
custom_function(route_to_navigate, is_navigating){ if (is_navigating){ this.router.navigate([route_to_navigate]); } else { // Open dialog } }