如何在导航到下一个位置之前关闭路线弹出窗口？ （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中。我试图在承诺之外的相同结构中执行此操作，但它将始终导航到：id，并且（弹出窗口）仍在URL中。

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

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

希望问题很清楚 - 非常感谢帮助！

Answer 1

GitHub上有一个关于此行为的bug report。

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

但也可以通过this.router.navigateByUrl('/')明确设置网址，这应该取消设置任何指定网点。

关注GitHub问题，因为它最近刚刚添加到积压中，可能很快就会在即将推出的Angular版本中修复。

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

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