link - router.navigate angular 5

¿Cómo hacer que una salida de enrutamiento con nombre funcione con loadChildren?

Question

He creado dos plunkers relacionados con un problema con la carga de los niños de enrutamiento y la navegación de salida. Por alguna razón, tener una ruta base vacía dentro del módulo secundario cargado no funciona con la navegación de salida.

En this ejemplo, al presionar el enlace ''Contacto'' falla.

app-routing.module

const appRoutes: Routes = [
{ path: ''admin'', loadChildren: () => AdminModule },
{ path: '''', redirectTo: ''/admin'', pathMatch: ''full'' }
];

admin-routing.module

const adminRoutes: Routes = [
{
path: '''',
component: AdminComponent,
children: [
{
path: ''compose'',
component: ComposeMessageComponent,
outlet: ''popup''
}
]
}];

En this ejemplo, al pulsar el enlace ''Contacto'' funciona.

app-routing.module

const appRoutes: Routes = [
{ path: ''admi'', loadChildren: () => AdminModule },
{ path: '''', redirectTo: ''/admi/n'', pathMatch: ''full'' }
];

admin-routing.module

const adminRoutes: Routes = [
{
path: ''n'',
component: AdminComponent,
children: [
{
path: ''compose'',
component: ComposeMessageComponent,
outlet: ''popup''
}
]
}];

La diferencia está en el app-routing.module y el admin-routing.module. El ejemplo de trabajo no tiene una ruta vacía para el admin-routing.module. De acuerdo con la documentation tiene un camino vacío debería funcionar.

Answer 1

El primer segmento de la matriz de parámetros de enlace de su directiva routerLink para "Contacto" se refiere a la ruta principal y al correspondiente enrutador de salida para la plantilla de componente que contiene el routerLink. Necesitaría colocar la configuración de ruta para la salida del enrutador nombrada en la configuración de enrutamiento de la aplicación en lugar de la configuración de enrutamiento de administración para el escenario de "fallas", pero es probable que esto sea indeseable debido a la separación de preocupaciones entre otros principios.

La diferencia entre el primer ejemplo que proporcionó que "falla" y el segundo que "funciona" radica en la forma en que el enrutador angular redirige a "configuración" de la ruta "retrocede" durante la comparación de patrones de rutas; sin embargo, el segundo aspecto clave es que el comportamiento que se evalúa como resultado de la coincidencia no debe afectar el comportamiento de la coincidencia de patrones de la ruta.

En el escenario ''falla'', el segmento de la ruta '''' coincide, redirectTo cambia la url a ''/ admin'', el enrutador coincide con la ruta ''/ admin'', el enrutador automáticamente hace coincidir la cadena vacía '''' en la configuración de enrutamiento de administrador, El enrutamiento está completo. En el segundo escenario de ''éxito'', la ruta coincide '''', redirectTo coincide con el primer segmento ''/ admi'', el enrutador evalúa el segundo segmento de la url ''/ n'', ya que el enrutamiento no está completo aún, el enrutador busca en el app-routing config para coincidencias ''/ n'' y no encuentra ninguna coincidencia, luego se evalúa la configuración de admin-routing y el segundo segmento ''/ n'' coincide, el enrutador coincide automáticamente con el enrutamiento de la cadena vacía ''''. El problema del escenario '' <a [routerLink]="[{ outlets: {popup: [''compose'']}}]">Contact</a> '' es que la matriz de parámetros de enlace de los <a [routerLink]="[{ outlets: {popup: [''compose'']}}]">Contact</a> es una cadena vacía y la url es actualmente ''/ admin''. Sí, la diferencia clave es la ubicación en la jerarquía en la que se produce la cadena '''' vacía que evalúa automáticamente el enrutador, es decir, la ubicación en la que se completa la evaluación de la configuración de rutas del enrutador. Es sutil pero la cadena vacía evaluada en el escenario ''falla'' se completa en el nivel superior de AdminComponent; por lo tanto, el patrón de enrutamiento que retrocede busca la cadena vacía '''' automáticamente en la ruta principal ''admin'', como resultado de redirectTo en la configuración de rutas de enrutamiento de aplicaciones. En el segundo escenario ''exitoso'', la evaluación del enrutador de la configuración de rutas se completa en la ruta secundaria '''' del padre ''/ n'' que se encuentra en el nivel inferior en la jerarquía en comparación con el escenario ''fallas'' de la configuración de rutas de administración-enrutamiento; por lo tanto, en el segundo escenario de "éxito", la "cadena vacía" que se evalúa automáticamente no se ve afectada por el redireccionamiento desde la configuración de rutas de enrutamiento de la aplicación cuando <a [routerLink]="['''', { outlets: {popup: [''compose'']}}]">Contact</a> se hace clic.

Para corregir la configuración de enrutamiento del escenario ''fallido'', debe modificar el primer segmento de la matriz de parámetros de enlaces de su directiva Contact routerLink para especificar la ruta de administración, es decir, <a [routerLink]="[''/admin'', { outlets: {popup: [''compose'']}}]">Contact</a> , o modifique la jerarquía en la que se realiza la ruta de la cadena vacía '''' que se completa automáticamente al completar el enrutador.

Para "corregir" modificando la jerarquía de configuración de las rutas en la que la ruta de la cadena '''' vacía que el enrutador evalúa automáticamente, es importante tener en cuenta que la ruta de la cadena '''' vacía no debe ser una cadena vacía '' '' camino. Por ejemplo:

const devNavRoutes: Routes = [
{
path: '''',
component: DevNavContainerComponent, canActivate: [ DevNavAuthGuard1Service ],
children: [
{ path: '''', canActivateChild: [ DevNavAuthGuard1Service ],
children: [
{ path: '''', redirectTo: ''dashboard'' },
{ path: ''dashboard'', component: DevNavDashboardComponent,
children: [
{ path: '':auxiliaryId'', component: DevNavAuxiliaryComponent, outlet: ''auxiliary''},
{ path: '':ancillaryId'', component: DevNavAncillaryComponent, outlet: ''ancillary'' }
] },
{ path: '':id'', component: DevNavDashboardComponent,
children: [
{ path: '':auxiliaryId'', component: DevNavAuxiliaryComponent, outlet: ''auxiliary''},
{ path: '':ancillaryId'', component: DevNavAncillaryComponent, outlet: ''ancillary'' }
] },
] },
] }
];

Nota:

// dev-nav-container.component
<router-outlet></router-outlet>

Y

// dev-nav-dashboard.component
<router-outlet name="auxiliary"></router-outlet>
<router-outlet name="ancillary"></router-outlet>