Ionic Deep链接器视图不会在浏览器后退按钮事件上更新

Question

我有一个用离子深接头构建的PWA。我在这里做了一个演示https://stackblitz.com/edit/ionic-mee2ut?file=app%2Fcustomer%2Fcustomer.component.html，其中浏览器后退按钮无法按预期工作。

Steps to reproduce
 1.In Dashboard page click on edit button.It will navigate to customer 
 page(see URL.It is changed to /Customer/CustomerId).
 2.In Customer page, you will see the customer info and other customers 
 list, there click edit from other customers list.This will open another 
 page.(see URL.It is changed to /Customer/CustomerId).
 3.Click on browser back button u can see that the URL is changed but the 
 view is not updated.

如果我重复步骤1＆amp; 2然后单击导航后退按钮而不是浏览器按钮，然后它才能正常工作。URL和视图都会更新。

我做错了什么，因为浏览器后退按钮没有按预期工作，或者这是离子框架的问题。

这是我在视图之间导航的方式

  EditCustomer(Customer: any) {
   this.navCtrl.push('Customer', { Id: Customer.Id, Name: Customer.Name });
  }

有人可以告诉我如何解决这个问题吗？

Answer 1

我在上面的url中看到了你的代码，你传递id为param而不是名称所以，这就是url正在改变的原因但数据没有反映我在app.module.ts文件中修改了你的代码请替换这个app.module.ts文件中的代码

IonicModule.forRoot(MyApp, {}, {
      links: [
        { component: DashboardComponent, name: 'Dashboard', segment: 'Dashboard' },
        { component: CustomerComponent, name: 'Customer', segment: 'Customer/:Id/:Name' }
      ]
    })

Answer 2

请使用以下代码替换您的app.module.ts

import { Component } from '@angular/core';
import { Platform, IonicApp, App } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'Dashboard';

  constructor(private _app: App, platform: Platform, private _ionicApp: IonicApp,) {
    platform.ready().then(() => {
      this.setupBackButtonBehavior();
    });
  }

    private setupBackButtonBehavior () {

    // If on web version (browser)
    if (window.location.protocol !== "file:") {

      // Register browser back button action(s)
      window.onpopstate = (evt) => {
        //Navigate back
        if (this._app.getRootNav().canGoBack()) 
        this._app.getRootNav().pop();
      };
    }
  }
}

Answer 3

我能够使用类似这样的东西：

let randomID = this.makeId(5); // random string id
this.navCtrl.push('path', {
     eventID: eventID,
     instituteID: instituteID,
     randomID: randomID
}, {
     id: `path/${eventID}/${instituteID}/${randomID}`
});

此“ id”似乎已解决，但如果您可以转到同一页面，则需要“ random”值来分隔对该页面的每次访问。

@IonicPage({
    name: 'path',
    segment: 'path/:instituteID/:eventID/:randomID'
})

默认情况下，它使用页面名称作为该视图的ID。如果多个视图具有相同的id =>，则在使用浏览器后退/前进时会出现问题。这是随机数的来源，用于分隔同一页面的多个实例。