Angular 2 routing redirect to with child routes

问题:

I am a newbie in Angular 2. I want to create isolated modules for every part of my app. For example I created the AuthModule with default component - AuthComponent which contain a router outlet for his child components (SignIn or SignUp). So I want to realize the following scenario:

1. When navigate to / - root off app - redirect to /auth
2. After redirect to /auth - load AuthComponent with router outlet
3. After AppComponent loaded - load default sign-in component via redirecting to /auth/sign-in

But when I going to localhost/ I get redirect to /auth what I want, but the next redirect to sign-in doesn't appear.

My 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> 

Result:

Environment @angular/cli: 1.0.0-rc.2 node: 7.7.1 os: win32 x64

回答1:

I have been the same problem. It seems an Angular tricks: If you remove leading slash in 'redirectTo' field, your application will be redirected successfully to auth/sign-in.

Use this in app.routing:

const routes: Routes = [       {path: '', redirectTo: 'auth', pathMatch: 'full'},   ]; 

‘redirectTo’ value starts with a ‘/’ = absolute path

‘redirectTo’ value starts without a ‘/’ = relative path

Read more about it: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc

P.S My opinion that your structure more correctly then YounesM's one. Parent module can't keep children routes: "app" module don't know that "auth" module have children module "sign-in".

回答2:

So, what it seems to happen is that when you redirectTo:'auth' it tries to load the '' children's component and since it does not have any component the router-outlet is empty.

Now it seems like {path: '', redirectTo: 'sign-in', pathMatch: 'full'} doesn't have any other purpose then redirecting to sign-in so you can simply redirect to /auth/sign-in instead.

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

or have a component in your '' path instead of redirecting.

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

回答3:

It's quite 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' } ]; 

回答4:

You can use the re-direction in your outer module, like this:

// Root routing module or app.routing.module const routes: Routes = [   {path: '', redirectTo: '/auth', pathMatch: 'full'},   {path: 'auth', redirectTo: '/auth/sign-in', pathMatch: 'full'} ];  // Child routing module or child.routing.module const routes: Routes = [  {    path: 'auth',    //component: AuthComponent, may not need this as you only need the template    children: [      {path: 'sign-in', component: SignInComponent}    ]  }, ]; 

You need not to have an empty path '' in your child component in case you want to navigate to this with a proper path

文章来源: Angular 2 routing redirect to with child routes