首页 文章

Angular 4辅助路线未按预期工作

提问于
浏览 次
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（不渲染）

我尝试了所有类型的黑客，例如提供组件的路径，需要在辅助路由中呈现到'dashboard'，并从主组件的ngOnInit方法尝试重定向到仪表板路由 this.router.navigate([{ outlets: { aux: 'dashboard' }}]);

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

angular angular-router

1 回答

  • 0

    激活主路由和辅助（辅助）路由的语法如下所示：

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

    但是，据我所知，路由中仍然存在错误，这种语法不起作用 . （至少在2个月前我尝试的时候不适合我 . ）

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

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

    此语法基本上将两个路由视为命名路由，并使用Angular定义的主路由名称（"primary"） . 您 don't 必须更改您的路线配置才能使用此功能 .

    回复于

相关问题