route - routing angular 5




Redirection de routage Angular 2 vers des routes enfants (2)

Je suis un débutant dans Angular 2. Je veux créer des modules isolés pour chaque partie de mon application. Par exemple, j'ai créé l'AuthModule avec le composant par défaut - AuthComponent qui contient une sortie de routeur pour ses composants enfants (SignIn ou SignUp). Donc, je veux réaliser le scénario suivant:

  1. Lorsque vous naviguez vers / - root off app - redirigez vers / auth
  2. Après la redirection vers / auth - load AuthComponent avec la sortie du routeur
  3. After AppComponent loaded - charge le composant de connexion par défaut via la redirection vers / auth / connect-in

Mais quand je vais à localhost / je me redirige vers / auth ce que je veux, mais la prochaine redirection à la connexion n'apparaît pas.

Mon code: 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>

Résultat:

Environnement @ angular / cli: nœud 1.0.0-rc.2: 7.7.1 os: win32 x64


C'est assez simple:

const routes: Routes = [
    { path: '', redirectTo: '/auth/signin', pathMatch: 'full' },
    { path: 'auth', component: AuthComponent, 
        children: [
            { path: 'signup', component: SignupComponent }, 
            { path: 'signin', component: SigninComponent }, 
            { path: 'logout', component: LogoutComponent }
        ]
    },
    { path: '**', redirectTo: '/auth/signin', pathMatch: 'full' }
];

Donc, ce qui semble se produire, c'est que lorsque vous redirectTo:'auth' il essaie de charger le composant '' children '' et comme il n'a pas de composant, le routeur-outlet est vide.

Maintenant, il semble que {path: '', redirectTo: 'sign-in', pathMatch: 'full'} n'a pas d'autre but que rediriger vers la sign-in donc vous pouvez simplement rediriger vers /auth/sign-in place .

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}
    ]
  },

];

ou avoir un composant dans votre '' chemin au lieu de rediriger.

app.routes

const routes: Routes = [
  {path: '', redirectTo: '/auth', pathhMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routes

const routes: Routes = [
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {path: '', component: SignInComponent}
    ]
  },

];