Angular 2 - 影响主出口的辅助出口导航

Question

• 功能要求（因为技术问题对观众没有意义）：

Angular 2 应用程序必须在启动时自行配置。如果不存在查询参数（例如默认状态），它必须显示默认主页和默认表单。 如果存在查询参数，则会进行自定义过程。定制过程基本上展示了一个定制的家和形式。

• 技术要求：

plunker 是实际功能需求的过度简化版本（查询参数解析省略），它基本上切换了头部组件。 调用应该在主组件中进行，因为解析逻辑（不包含在 plunker 中）就在那里。

this.route.queryParams.filter(qp => !_.isEmpty(qp)).subscribe(qp => this.parseParameters(qp));

router.navigate 无法在 AppComponent 的命名出口 ( header ) 中执行导航。 如果在子组件中使用相同的代码（例如 DefaultComponent）

这是plunkr（请看注释代码）

演示：http://embed.plnkr.co/qyquCE4h5OX8sNLKM8lu/

添加一些跟踪我发现路由器取消了导航：

• 路由器事件：NavigationStart
  • NavigationStart(id: 1, url: '/(header:head)')
• 路由器事件：NavigationStart
  • NavigationStart(id: 2, url: '/')
• 路由器事件：NavigationCancel
  • NavigationCancel {id: 1, url: "/(header:head)", 原因: "导航 ID 1 不等于当前导航 ID 2"}

问题：

出口树是互斥的吗？换句话说，我可以像这样导航标题出口：

this.router.navigate(
[{
  outlets: {
    header: "head"
  }
}]

);

不影响主插座？

Answer 1

也许我得到了你想要的。当你运行你的应用程序时，你希望 headComponent 在 named outlet 和 default component 在 regular outlet。
对吗？？？

为此，您需要将路线更改为跟随，

演示：https://plnkr.co/edit/lG66FIII9b9Xbi7YiHqc?p=preview

1)

const headerRoutes: Routes = [
  { path: '', component: DefaultComponent},
  { path: '', component: HeadComponent, outlet: headerOutlet}
];

注意：现在，您不需要以下代码，

ngOnInit() {

  /* now not required */  

  this.router.navigate(
    [{
      outlets: {
        header: "head"
      }
    }]
  );

}

2) 这也解决了您在问题中提到的第二 (2) 个问题。