首页 文章

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

提问于
浏览 次
4
  • 功能要求（因为技术问题对 Spectator 没有意义）：

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

  • 技术要求：

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

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

router.navigate 无法从AppComponent执行指定出口（ Headers ）中的导航 . 如果在子组件内使用相同的代码（例如DefaultComponent）

这是plunkr（请查看注释代码）

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

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

  • 路由器事件：NavigationStart

  • NavigationStart（id：1，url：'/(header:head)'）

  • 路由器事件：NavigationStart

  • NavigationStart（id：2，url：'/'）

  • 路由器事件：NavigationCancel

  • NavigationCancel {id：1，url："/(header:head)"，原因："Navigation ID 1 is not equal to the current navigation id 2"}

题：

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

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

）;

不影响主要出口？

angular angular2-routing

1 回答

  • 0

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

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

    DEMO : https://plnkr.co/edit/lG66FIII9b9Xbi7YiHqc?p=preview

    1)

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

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

    ngOnInit() {

  /* now not required */  

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

}

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

    回复于

相关问题