如何在导航到下一个位置之前关闭路线弹出窗口？(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仍然在URL中的(popup).

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

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

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

Answer 1

GitHub 上有一份关于此行为的错误报告。

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

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

请关注 GitHub 问题，因为它最近刚刚添加到待办事项中，并且可能很快会在即将发布的 Angular 版本中得到修复。

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

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