Angular 辅助路由 - 无法在同一个导航调用中导航和清除辅助路由？

Question

我遇到了一个问题，我似乎无法导航到新路线，并同时清除出口/次要路线。

单独调用这两个操作是可行的 - 但感觉像是一种解决方法。是否有充分的理由将它们作为两个电话来完成？还是我的实现有错误？还是我应该将其归档为 GitHub 问题？

这些独立工作：

// Navigate to `/second`
this._router.navigate(['/second']);

// Clears the `popup` outlet
this._router.navigate(['', {outlets: { popup: null }}]);

我认为这应该有效，但它并没有清除出口：

this._router.navigate(['/second', {outlets: { popup: null }}]);

我目前的解决方法是：

this._router.navigate(['', {outlets: { popup: null }}]).then(() => { this._router.navigate(['second']); } );

我创建了一个 plnkr proof of concept - 导航代码在 global-popup.component.ts

Answer 1

您需要像下面这样明确设置主出口路径，

public closeAndNav_singleCall() {
   return this._router.navigate([{
     outlets: { 
       primary : ['second'],
       popup: null 
     }
   }]);
}

更新了你的Plunker!!

希望对您有所帮助！！

Answer 2

当主要导航在主要路线上是绝对的时，上述方法有效。我遇到的问题是：如何在清除次要路线的同时在主要路线上进行相对导航。

我尝试了不同的组合，但 none 似乎有效：

开始于 https://localhost:4200/one/two(popup:some/other)

    this.router.navigate([
      '',
      {
        outlets: {
          primary: ['areaTwo', 'second'],
          popup: null,
        },
      },
    ]);

结束于 https://localhost:4200/areaTwo/second

因此它清除了辅助弹出窗口，并进行了绝对导航。

开始于 https://localhost:4200/one/two(popup:some/other)

    this.router.navigate([
      {
        outlets: {
          primary: ['areaTwo', 'second'],
          popup: null,
        },
      },
    ], { relativeTo: this.activatedRoute });

结束于 https://localhost:4200/one/two/areaTwo/second(popup:some/other)

所以它在主要方面做了一个相对，但不清除次要。

但是我们怎样才能做这样的事情：

开始于 https://localhost:4200/one/two(popup:some/other)

结束于 https://localhost:4200/one/two/areaTwo/second

Angular 辅助路由 - 无法在同一个导航调用中导航和清除辅助路由？

Angular secondary routes - Can't navigate & clear secondary route in the same navigate call?

angular-routing

angular2-routing

angular