traducir - Angular 2 Router Manejo de comodines con rutas infantiles.

traductor de ingles online

Question

Cuando se usan rutas secundarias con el enrutador angular2 "3.0", no es necesario declararlas en la configuración del enrutador principal (antes, tenía que hacer algo como /child... en el componente principal).

Quiero configurar un controlador de "página no encontrada" global, que puedo hacer así:

{ path: ''**'', component: PageNotFoundComponent }

en mi módulo de enrutamiento de aplicaciones.

La advertencia: si hago esto, el enrutador navega a las rutas declaradas en el módulo de enrutamiento de la aplicación antes de que el PageNotFoundComponent bien. Pero siempre navega a la ruta de comodín cuando intento acceder a una ruta secundaria (declarado mediante RouterModule.forChild en algún módulo de enrutamiento secundario).

Intuitivamente, la ruta de comodín se debe colocar detrás de todas las demás configuraciones de ruta, ya que el enrutador se resuelve en orden de declaración. Pero no parece haber una manera de declararlo después de las rutas secundarias. Tampoco parece muy elegante declarar una ruta comodín en todos los módulos enrutadores secundarios.

¿Me estoy perdiendo algo o simplemente no hay manera de definir una página 404 global en Angular-2-Router-3 cuando se usan rutas secundarias?

Answer 1

La solución simple es reordenar los módulos en la matriz de ''importaciones'' en el archivo del módulo de la aplicación; asegúrese de que la aplicación / enrutador raíz sea el último elemento de la matriz; por ejemplo

@NgModule({ imports: [FeatureModule1, FeatureModule2, FeatureModule3, AppRouterModule] ... ... })

Answer 2

Puede tener fácilmente una ruta de comodín centralizada, es decir, para un componente ''Página no encontrada'' en todo el sitio. Simplemente debe extraerse en un módulo de enrutamiento separado , que se incluye después de todos los otros módulos que contienen rutas secundarias.

Por lo tanto, la ruta de comodín está realmente en la última posición y no oculta las rutas de ningún módulo siguiente.

El módulo de enrutamiento comodín o el módulo de enrutamiento ''página no encontrada'':

@NgModule({
imports: [
RouterModule.forChild([
{
path: ''**'',
component: NotFoundComponent
}
])
],
declarations: [
NotFoundComponent
],
exports: [
RouterModule
]
})
export class WildcardRoutingModule { }

El módulo de aplicación:

@NgModule({
imports: [
BrowserModule,
AppRoutingModule, // Has forRoot routes
HomeModule, // Has forChild routes
LoginModule, // Has forChild routes
ProductModule, // Has forChild routes
DiagnosticsModule, // Has forChild routes
WildcardRoutingModule // Last position
],
declarations: [
AppComponent
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 3

Tengo el siguiente ejemplo para ti. La ruta / redirecciona a la ruta /app y muestra el StartComponent dentro del <router-outlet> de su AppComponent principal. El mismo StartComponent tiene otra <router-outlet> en su plantilla en la que el enrutador carga los componentes secundarios.

const appRoutes: Routes = [
{
path: '''',
redirectTo: ''app'',
pathMatch: ''full'',
},
{
path: ''app'',
component: StartComponent,
children: [
{
path: '''',
redirectTo: ''welcome''
},
{
path: ''welcome'',
component: WelcomeComponent
},
{
path: ''settings'',
component: SettingsComponent
},
]
},
{
path: ''**'',
component: PageNotFoundComponent
}
];

La última ruta es la ruta comodín con la ruta ** . Se mostrará si navega a una URL desconocida como /test123 o para los componentes secundarios /app/test123 .

El pathMatch: ''full'' significa que el enrutador está buscando una ruta igual. Es importante para las redirecciones.

Si también necesita un PageNotFound PageNotFound para sus hijos, también puede agregarles un comodín.

{
path: ''app'',
component: StartComponent,
children: [
{
path: '''',
redirectTo: ''welcome''
},
{
path: ''welcome'',
component: WelcomeComponent
},
{
path: ''**'',
component: ChildrenPageNotFoundComponent
},
]
}