Angular 2路由重定向到子路由答案

【问题标题】：Angular 2 routing redirect to with child routesAngular 2路由重定向到子路由
【发布时间】：2017-08-10 00:49:49
【问题描述】：

我是 Angular 2 的新手。我想为我的应用程序的每个部分创建独立的模块。例如，我使用默认组件创建了AuthModule - AuthComponent，其中包含一个router-outlet 用于他的子组件（SignIn 或 SignUp）。所以我想实现以下场景：

导航到 / 时 - 根除应用程序 - 重定向到 /auth
重定向到 /auth 后 - 使用路由器出口加载 AuthComponent
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>

结果：

环境@angular/cli：1.0.0-rc.2 节点：7.7.1 操作系统：win32 x64

【问题讨论】：

将子路由直接放在主路由中，不要单独定义
我将所有路由都放到了应用路由中，但它仍然没有按预期工作。

标签： angular routing children

【解决方案1】：

我也遇到了同样的问题。这似乎是一个Angular技巧：如果您删除“redirectTo”字段中的前导斜杠，您的应用程序将成功重定向到 auth/sign-in。

在 app.routing 中使用这个：

const routes: Routes = [ 

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

];

‘redirectTo’值以‘/’开头=绝对路径

'redirectTo' 值开始时没有'/' = 相对路径

P.S 我认为你的结构比 YounesM 的结构更正确。父模块不能保留子路由：“app”模块不知道“auth”模块有子模块“登录”。

【讨论】：

【解决方案2】：

开启auth.routes

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

【讨论】：

聪明的解决方案。老实说，我从来没有想过可以复制路线配置！
在特性模块上使用延迟加载时，这似乎会中断，有什么办法解决这个问题吗？

【解决方案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}
    ]
  },

];

【讨论】：

感谢您的回答。是的，我可以直接从应用程序路由重定向到 /auth/sign-in 并且它运行良好。但是我不想打开 AuthModule 的内部结构（例如 /auth/**sign-in** 部分路由）你说：所以，似乎发生的事情是当你重定向到：' auth' 它尝试加载 '' 子组件，因为它没有任何组件，所以路由器插座是空的。 但我有一个默认的子路由器
只要您使用'' 路由重定向，您的routerLinks 似乎将无法正常工作（因为他们正在尝试加载组件）另一种选择是拥有一个要在 '' 路由中加载的组件（已编辑）。我没有看到其他绕过它的方法。
是的，它会起作用，但在这种情况下，我们无法将 url 更改为 /auth/ sign-in 我认为最好的做法是在内部组织路由Angular 2 中的模块。感谢您的回答

【解决方案4】：

很简单：

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

【讨论】：

【解决方案5】：

您可以在子路由中执行此操作：

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

【讨论】：

【解决方案6】：

您可以在外部模块中使用重定向，如下所示：

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

如果您想使用正确的路径导航到此路径，您的子组件中不需要有一个空路径 ''

【讨论】：

【解决方案7】：

我也遇到了同样的问题，但以上答案似乎都不是一个好的解决方案。在我的代码中，我订阅了路由器事件并最终解决了它。

AuthComponent 构造函数中的代码：

  this.router.events.subscribe((e: Event) => {
   if (e instanceof NavigationEnd) {
    this.activeUrl = e.urlAfterRedirects || e.url;
    if (this.activeUrl === '/auth') {
      this.router.navigateByUrl('/auth/sign-in');
    }
   }
  });

【讨论】：