Ionic2 Ionic Deep linker视图在浏览器后退按钮事件时不更新

我有一个用爱奥尼亚深链接器构建的PWA。我在这里做了一个演示，其中浏览器后退按钮没有按预期工作

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和2，然后单击导航后退按钮而不是浏览器按钮，那么它工作正常。URL和视图都会更新

是否因为浏览器后退按钮不能按预期工作，或者这是ionic框架的问题，所以我做错了什么

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

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

---

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

我在上面的url中看到了你的代码，你正在以param的形式传递id，但不是名称，因此，这就是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' }
      ]
    })

---

我在上面的url中看到了您的代码，您将id作为参数传递，但不是名称，因此，这就是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' }
      ]
    })

---

请用以下代码替换您的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();
      };
    }
  }
}

---

请用以下代码替换您的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();
      };
    }
  }
}

---

我可以使用这样的东西：

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

这个“id”似乎可以修复它，但是如果您可以转到同一个页面，那么它需要一个“随机”值来分隔对该页面的每次访问

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

---

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

我可以使用这样的方法：

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

这个“id”似乎可以修复它，但是如果您可以转到同一个页面，那么它需要一个“随机”值来分隔对该页面的每次访问

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

---

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

更改了我的链接配置，但仍然没有更新视图。我已按照您的建议更新了此链接中的代码。更改上面的代码对你有用吗？你能测试一下吗？对我来说，它工作正常，意味着上面的链接工作正常。请重新验证一次，让我知道你好，我再次检查了。我在上面贴了一张图片，显示了问题。在图像中，您可以看到url为Customer/2/Steve，但页面显示有关Customer/4/TodHi的信息，如果您在mobile中打开ionic应用程序，它在您的手机中没有任何浏览器按钮，我们可以使用mobile back按钮向后导航。如果您在手机中尝试上述代码，它将单独工作，请查看应答器更改了我的链接配置，但仍然没有更新视图。我已按照您的建议在此链接中更新了我的代码。更改上面的代码对你有用吗？你能测试一下吗？对我来说，它工作正常，意味着上面的链接工作正常。请重新验证一次，让我知道你好，我再次检查了。我在上面贴了一张图片，显示了问题。在图像中，您可以看到url为Customer/2/Steve，但页面显示有关Customer/4/TodHi的信息，如果您在mobile中打开ionic应用程序，它在您的手机中没有任何浏览器按钮，我们可以使用mobile back按钮向后导航。如果您在手机中尝试上述代码，它将单独工作，请查看该答案您对此有任何解决方案吗？我也有同样的问题你有什么办法吗？我也有同样的问题