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

Question

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

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

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

(注意这两个不同的选项卡/出口：主页和提交(

编辑模式是通过订阅路由参数来确定的，如果url中存在: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})')

一切正常直到用户再次点击歌曲页面上的编辑按钮

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

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

我使用的是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);
}

Answer 2

受@Leonardo解决方案的启发，我对其进行了一些修改。虽然还没有检查Angular 8-我相信使用outlet.canGoBack()/outlet.pop()也有可能适用于8:

<ion-tabs #tabs>
<ion-tab-button tab="tab1" (click)="handleTabClick($event)">
<ion-label>Tab</ion-label>
</ion-tab-button>
</ion-tabs> 

// usual @Component() goes here
class TabsPage {
@ViewChild('tabs') tabs: IonTabs;
resetStackTabs = ['inbox', 'tasks'];
handleTabClick = (event: MouseEvent) => {
const { tab } = event.composedPath().find((element: any) =>
element.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };
// without checking resetStackTabs this will work for any tab
if (this.resetStackTabs.includes(tab) &&
this.tabs.outlet.canGoBack(1, tab)) {
event.stopImmediatePropagation();
// here we may need pop depth more than one if we handle deeper nav for a tab
return this.tabs.outlet.pop(1, tab);
}
}
}