在 Angular 5 的出口模式之间导航？答案

【问题标题】：Navigate between outlet modals in Angular 5?在 Angular 5 的出口模式之间导航？
【发布时间】：2018-09-09 09:49:00
【问题描述】：

我无法处理从一个模式窗口到另一个模式窗口的导航。我有路由模块：

{
      path: 'modal1',
      component: Modal1Component,
      outlet: 'modal',
    }, {
      path: 'modal2',
      component: Modal2Component,
      outlet: 'modal',
    }

主要组件：MainComponent 在它的模板中我有

<router-outlet name="modal"></router-outlet>

所以我点击了一个触发按钮

this.router.navigate([this.router.url, { outlets: {modal: 'modal1'} }]);

在呈现的Modal1Component 中，我有一个modal2 的按钮。所以我想从modal1 打电话给modal2。我如何告诉router 去父路由然后调用：

this.router.navigate([/* what should be here? */, { outlets: {modal: 'modal2'} }]);

【问题讨论】：

你给我们看的路由，path和outlet都是一样的，是不是抄错了？
抱歉，打错字了。我更新了它

标签： javascript angular ecmascript-6 angular2-routing angular5

【解决方案1】：

看起来您只是在更改 router.navigate 中的插座，但路由本身并没有真正改变。而且我认为您实际上不需要一个命名的插座来完成您想要实现的目标。

当您使用 router.navigate 时，您可以指定是否要使用 ActivatedRoute 类从某处进行相对导航。为此，您有两种选择：

从您当前的组件进行相对导航，并在路径中指明您想要“上”一级。示例：

this.router.navigate(['../modal2'], { relativeTo: this.activatedRoute });
直接从您的父母那里导航。我会亲自使用这个，但两者都有效。示例：

this.router.navigate(['modal2'], { relativeTo: this.activatedRoute.parent });

我创建了一个迷你存储库，其中包含一个（我认为）您想要实现的示例：stackblitz。

希望有帮助

【讨论】：

谢谢，但没有帮助。它只是回到父 url 没有 (modal:modal1) 在 url
哼 this.router.url 表示当前的 url，我虽然你的模态是一些子组件。试试“this.router.navigate('/modal1)”？
this.router.navigate(['/modal1']) 仅导航到根路径 /modal1。但我之前有父路线：/grandparentRoute/parentRoute/modal1
好的，当你使用 this.router.url 导航到你的模式时，你能告诉我们什么吗？
请完整的路线配置:)

【解决方案2】：

某些服务在这种情况下可能有用，例如在文档中：

https://angular.io/guide/component-interaction

【讨论】：

我认为为此创建服务不是一个好主意，因为它只是路由器的责任