Angular 2路由重定向到子路由

Question

我是Angular 2的新手.我想为我的应用程序的每个部分创建独立的模块.例如,我使用默认组件AuthComponent创建了AuthModule,其中包含其子组件(SignIn或SignUp)的路由器插座.所以我想实现以下场景:

1. 导航到/ - root off app - 重定向到/ auth
2. 重定向到/ auth后 - 用路由器插座加载AuthComponent
3. 加载AppComponent后 - 通过重定向到/ auth/sign-in加载默认登录组件

但是当我去localhost /我得到重定向到/ auth我想要的东西,但下一次重定向到登录不会出现.

我的代码: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>

结果:

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

Answer 1

我一直都是同样的问题.这似乎是一个Angular技巧:如果你在'redirectTo'字段中删除了前导斜杠,你的应用程序将被成功重定向到auth/sign-in.

在app.routing中使用它:

const routes: Routes = [ 

    {path: '', redirectTo: 'auth', pathMatch: 'full'}, 

];

'redirectTo'值以'/'=绝对路径开头

'redirectTo'值在没有'/'=相对路径的情况下开始

了解更多信息:https://vsavkin.com/angular-router-understanding-redirects-2826177761fc

PS我认为你的结构比YounesM更正确.父模块不能保留子路由:"app"模块不知道"auth"模块有子模块"登录".

Answer 2

在 auth.routes

const routes: Routes = [
  {
    path: "auth",
    redirectTo: "auth/sign-in"
  },
  {
    path: "auth",
    component: AuthComponent,
    children: [{ path: "sign-in", component: SignInComponent }]
  }
];

Answer 3

所以,它似乎发生的是,当你redirectTo:'auth'试图加载''子组件时,由于它没有任何组件,路由器插座是空的.

现在似乎{path: '', redirectTo: 'sign-in', pathMatch: 'full'}没有任何其他目的,然后重定向到sign-in所以你可以简单地重定向到/auth/sign-in.

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

];

或者在''路径中有一个组件而不是重定向.

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

];