0

我有一个应用程序，其中有一个登录组件和一个主模块。我想在主模块中有一个辅助路由。

一旦用户登录，我就会重定向到主路由。

这是我的 app-routing.module

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

下面是我的 home-routing.module.ts

const routes: Routes = [
    {
        path: 'home',
        children: [
            {
                path: '',
                component: HomeComponent,
                canActivate: [CanActivateGuard]
            },
            {
                path: '',
                outlet: 'aux',
                component: DashboardComponent,
                canActivate: [CanActivateGuard]
            }
        ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

我的期望是，当应用程序被重定向到主路由时，this.router.navigate(['/home']);应该渲染 HomeComponent（现在正在渲染）和 DashboardComponent 应该渲染（不是渲染）

我尝试了各种技巧，例如提供需要在 aux 路由中呈现到“仪表板”的组件路径，以及从主组件的 ngOnInit 方法尝试重定向到仪表板路由this.router.navigate([{ outlets: { aux: 'dashboard' }}]);

但注意似乎有效。我做错了什么？

4

1 回答 1

0

激活主路由和辅助 (aux) 路由的语法如下所示：

this.router.navigate(['/home', { outlets: { aux: 'dashboard' }}]);

但是，据我所知，路由中仍然存在错误，并且此语法不起作用。（至少大约 2 个月前我尝试过它时没有。）

我不得不改用这样的语法：

this.router.navigate([{ outlets: { 
                           primary: ['/home'], 
                           aux: ['dashboard'] 
}}]);

这种语法基本上将两个路由都视为命名路由，并使用 Angular 定义的主路由名称（“primary”）。您无需更改路线配置即可使用。

于 2017-06-23T06:31:28.900 回答