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 回答