angular - 如何在导航到下一个位置之前关闭路线弹出窗口？ ( Angular 2)

Question

我展示了一系列项目，您可以点击这些项目将您带到下一条路线。您也可以单击此页面上的弹出窗口。如果您单击弹出窗口，然后单击其中一项，我想在显示下一条路线之前销毁弹出窗口。

onSelect(id) {
    if (this.router.url.includes('popup')) {

      let p = Promise.resolve(() => this.closePopup())
      p.then(() => this.router.navigate(['/', id]))

    } else {

      this.router.navigate(['/', id])

    }
  }

closePopup() {
    this.router.navigate([{outlets: {popup: null}}])
  }

我不太了解 promises，所以我不确定我是否以正确的结构编写了它，但是这段代码无法正常工作，因为它总是导航到下一个路由，弹出窗口仍在 URL 中。我尝试在 promise 之外以相同的结构进行操作，但它始终会导航到 :id，并且 (popup) 仍在 URL 中。

我也尝试过:this.router.navigate(['/', id, {outlets: {popup: null}}])。

路由器中是否有允许绝对重写 URL 的功能？或者有没有办法确保它在导航到 :id 之前从 url 中删除弹出窗口。

希望问题很清楚 - 非常感谢您的帮助!

Answer 1

有一个bug report在 GitHub 上提交了有关此行为的信息。

根据它，this.router.navigate([{ outlets: { popup: null } }); 应该可以。

但也可以通过 this.router.navigateByUrl('/') 显式设置 URL，这应该取消设置任何命名的导出。

关注 GitHub 问题，因为它最近才被添加到积压工作中，并且可能很快会在即将推出的 Angular 版本中得到修复。

或者，您可以在 this issue 中找到另一种可能的解决方法:

this.router.navigate([this.route.parent.snapshot.params, {outlets: {popup: null}}]);