Question

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

{
      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的按钮。所以我想从modal2致电modal1。如何告诉router转到父路线，然后致电：

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

Answer 1

看起来你只是在改变router.navigate中的插座，但路线本身实际上并没有改变。而且我认为你实际上并不需要一个有名的出路来做你想要达到的目的。

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

相对于您当前的组件导航，并在路径中指出您想要“上升”一个级别。示例：

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

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

我创建了一个小型回购，其中包含了您想要实现的目标（我认为）：stackblitz。

希望有所帮助

Answer 2

在这种情况下，某些服务很有用，例如doc：

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

在Angular 5中的插座模态之间导航？

2 个答案: