0
345
VistasRedirección de enrutamiento angular 2 con rutas secundarias
Soy un novato en Angular 2. Quiero crear módulos aislados para cada parte de mi aplicación. Por ejemplo, creé AuthModule con el componente predeterminado: AuthComponent , que contiene una router-outlet para sus componentes secundarios (Iniciar sesión o Registrarse). Entonces quiero darme cuenta del siguiente escenario:
- Cuando navegue a / - rootear la aplicación - redirigir a /auth
- Después de redirigir a /auth: cargue AuthComponent con la salida del enrutador
- Después de cargar AppComponent: cargue el componente de inicio de sesión predeterminado mediante la redirección a /auth/sign-in
Pero cuando voy a localhost/ obtengo una redirección a /auth lo que quiero, pero la siguiente redirección para iniciar sesión no aparece.
Mi código: app.routing
const routes: Routes = [ { path: '', redirectTo: '/auth', pathMatch: 'full' } ]; export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes); auth.routing
const routes: Routes = [ { path: 'auth', component: AuthComponent, children: [ { path: '', redirectTo: 'sign-in', pathMatch: 'full' }, { path: 'sign-in', component: SignInComponent } ] }, ]; export const authRouting: ModuleWithProviders = RouterModule.forChild(routes); auth.component.html
<div class="container"> <h1>Auth component</h1> <router-outlet></router-outlet> </div>Resultado:
Entorno @angular/cli: 1.0.0-rc.2 nodo: 7.7.1 os: win32 x64
3 Respuestas
Responde la pregunta0
He sido el mismo problema. Parece un truco angular: si elimina la barra diagonal inicial en el campo 'redirectTo', su aplicación se redirigirá con éxito a autenticación/inicio de sesión.
Usa esto en app.routing:
const routes: Routes = [ {path: '', redirectTo: 'auth', pathMatch: 'full'}, ];El valor 'redirectTo' comienza con '/' = ruta absoluta
El valor 'redirectTo' comienza sin '/' = ruta relativa
Lea más sobre esto: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc
PD Mi opinión es que su estructura es más correcta que la de YounesM. El módulo principal no puede mantener las rutas secundarias: el módulo "aplicación" no sabe que el módulo "auth" tiene el módulo secundario "iniciar sesión".
0
En rutas de auth.routes
const routes: Routes = [ { path: "auth", redirectTo: "auth/sign-in" }, { path: "auth", component: AuthComponent, children: [{ path: "sign-in", component: SignInComponent }] } ];0
Entonces, lo que parece suceder es que cuando redirectTo:'auth' '' cargar el componente infantil y, como no tiene ningún componente, la salida del enrutador está vacía.
Ahora parece que {path: '', redirectTo: 'sign-in', pathMatch: 'full'} no tiene ningún otro propósito que redirigir para iniciar sign-in lo que simplemente puede redirigir a /auth/sign-in su lugar .
app.routes
const routes: Routes = [ {path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'} ]; export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);auth.routes
const routes: Routes = [ { path: 'auth', component: AuthComponent, children: [ {path: 'sign-in', component: SignInComponent} ] }, ]; o tenga un componente en su ruta '' en lugar de redirigir.
app.routes
const routes: Routes = [ {path: '', redirectTo: '/auth', pathMatch: 'full'} ]; export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);auth.routes
const routes: Routes = [ { path: 'auth', component: AuthComponent, children: [ {path: '', component: SignInComponent} ] }, ];