角度2 - 辅助插座的导航影响主要出口

Question

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

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

• 技术要求：

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

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

router.navigate 无法在AppComponent的指定插座（标头）中执行导航。 如果在子组件（例如DefaultComponent）

中使用，则相同的代码可以工作

这里是plunkr（请查看评论代码）

DEMO：http://embed.plnkr.co/qyquCE4h5OX8sNLKM8lu/

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

• 路由器事件：NavigationStart
  • NavigationStart（id：1，url：＆＃39; /（header：head）＆＃39;）
• 路由器事件：NavigationStart
  • NavigationStart（id：2，url：＆＃39; /＆＃39;）
• 路由器事件：NavigationCancel
  • NavigationCancel {id：1，url：＆＃34; /（header：head）＆＃34;，原因：＆＃34;导航ID 1不等于当前导航ID 2＆＃34;}

问题：

插座树是否互相排斥？换句话说，我可以像这样导航标题出口：

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

）;

不影响主要出口？

Answer 1

也许我得到了你想要的东西。运行应用程序时，您希望名为outlet 中的 headComponent 和常规商店中的默认组件。
右????

为此，您需要将路线更改为以下内容，

DEMO：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）这也解决了你问题中提到的第二个问题。