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

>功能要求(因为技术问题对观众没有意义)： @H_404_7@

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

@H_404_7@>技术要求：

@H_404_7@plunker是实际功能需求的过度简化版本(省略了查询参数解析),它基本上切换了头部组件.
调用应该在主要组件中进行,因为解析逻辑(不包括在plunker中)就在那里.

@H_404_7@

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

@H_404_7@router.navigate无法从AppComponent执行指定出口(标题)中的导航.
如果在子组件内使用相同的代码(例如DefaultComponent)

@H_404_7@这是plunkr(请查看注释代码)

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

@H_404_7@>路由器事件：NavigationStart

@H_404_7@> NavigationStart(id：1,url：’/(header：head)’)

@H_404_7@>路由器事件：NavigationStart

@H_404_7@> NavigationStart(id：2,url：’/’)

@H_404_7@>路由器事件：NavigationCancel

@H_404_7@> NavigationCancel {id：1,url：“/(header：head)”,原因：“导航ID 1不等于当前导航ID 2”}

@H_404_7@题：

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

@H_404_7@

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

@H_404_7@);

@H_404_7@不影响主要出口？

也许我得到了你想要的东西.运行应用程序时,您需要在命名插座中使用headComponent,在常规插座中使用默认组件.
对？？？？ @H_404_7@

@H_404_7@为此,您需要将路线更改为以下,

@H_404_7@1)

@H_404_7@

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

@H_404_7@注意：现在,您不需要以下代码,

@H_404_7@

ngOnInit() {

  /* now not required */  

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

}

@H_404_7@2)这也解决了你的问题中提到的第二个问题.

猜你在找的Angularjs相关文章