在 Angular 5 中的出口模态之间导航？

Question

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

{
      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'} }]);

Answer 1

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

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

Answer 2

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

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

从当前组件开始相对导航，并在路径中指明您想要 "go up" 一级。示例：

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

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

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

希望对您有所帮助

在 Angular 5 中的出口模态之间导航？

Navigate between outlet modals in Angular 5?

javascript

ecmascript-6

angular2-routing

angular

angular5