Question

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

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

这是我的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（不渲染）

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

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

Answer 1

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

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

但是，据我所知，路由中仍然存在错误，这种语法不起作用。（至少在2个月前，当我尝试它时，它对我来说并不适合。）

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

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

此语法基本上将两个路由视为命名路由，并使用Angular定义的主路由名称（＆＃34; primary＆＃34;）。您不必须更改路由配置才能使其正常工作。

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

1 个答案: