如何使用Angular Ionic 4从选项卡路由后重置路由堆栈

Question

我有一个工作流程，用户可以编辑歌曲的信息。当用户在歌曲页面上时，他们可以单击编辑按钮以显示编辑页面。例如，如果用户正在查看提交并想要编辑，他们将使用navigateByURL(tabs/(submit:submit/:artist/:submission)从发布页面转到提交页面：

/tabs/(home:release/isrk2mpkiq)到 - >

/tabs/(submit:submit/2zmrsXMHxagFz6vI2cD7r6/isrk2mpkiq)

（注意这些是如何在两个不同的选项卡/出口上：主页和提交）

编辑模式是通过订阅路线参数来确定的，如果网址中存在:artist（2zmrsXMHxagFz6vI2cD7r6）和:submission（isrk2mpkiq），那么我们就知道显示编辑提示（所有细节都填入输入）而不是空提交提示，在提交页面的ngOnInit()中使用以下内容：

this.route.params.subscribe(
  (params: Params) => {
    if (params['artist'] && params['submission']) {
      this.submissionEdit(params['artist'], params['submission'])
    } 
  }
)

用户完成编辑后，将保存更新，并将用户路由回提交页面（从而远离提交选项卡）：

navigateByUrl('tabs/(home:release/${this.submission.submissionUID})')

一切都很完美，直到用户再次点击歌曲页面上的编辑按钮

当他们这样做时，他们被路由回到提交页面网址，但由于路由没有在提交选项卡上更改，路由参数订阅没有更新，无法在订阅中运行this.submissionEdit()方法，因此不填充提交表单与现有数据。

所以我的问题是，在用户提交编辑后，如何将特定的提交选项卡/堆栈重置回tabs/(submit:submit)，以便当用户再次单击编辑时，URL确实会更改，并且该param订阅可以更新？

我正在使用Ionic 4 Angular。让我知道您可能需要的其他信息，谢谢！

Answer 1

我想我有一个暂时的解决方案似乎没有任何副作用（尚未）。

在tabs.page.html中的每个标签上：

<ion-tab-button tab="tab1" (click)="openTab('tab1', $event)">
    <ion-label>Tab</ion-label>
</ion-tab-button>

在tabs.page.ts上：

async openTab(tab: string, evt: MouseEvent) {
    const tabSelected = this.tabs.getSelected();
    evt.stopImmediatePropagation();
    evt.preventDefault();
    return tabSelected !== tab
      ? await this.navCtrl.navigateRoot(this.tabs.outlet.tabsPrefix + '/' + tab)
      : this.tabs.select(tab);
}