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})')

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

这样做时，它们将被路由回到该提交页面的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);
        }
    }
}

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

2 个答案: