如何将属性设置为 NavParams 以在 Ionic 中更新 url 路径？答案

【问题标题】：How to set attribute into NavParams for update url path in Ionic?如何将属性设置为 NavParams 以在 Ionic 中更新 url 路径？
【发布时间】：2017-10-06 22:01:16
【问题描述】：

例如，显示在 URL 中选择的单选按钮的值。

网址：[域]/选择器/：值

@IonicPage({
  name: 'selector',
  section: 'selector/:value'
})
@Component({
  template: `
<ion-list radio-group [(ngModel)]="selector">
  <ion-item>
    <ion-label>First</ion-label>
    <ion-radio value="first" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Second</ion-label>
    <ion-radio value="second"></ion-radio>
  </ion-item>
</ion-list>
  `
})
class SelectorComponent {
  private _value;
  get selector() {
    return this._value;
  }
  set value(value) {
    this._value = value;
    //set :value in url equals current value
  }
}

现在，当用户切换按钮时，他应该会在 URL 中看到 new :value。

【问题讨论】：

标签： ionic-framework ionic2 ionic3

【解决方案1】：

您可以使用Ionic Page dynamic links。在组件顶部添加 @IonicPage() 装饰器，并使用您的动态值指定一个段。

@IonicPage({
  name: 'detail-page',
  segment: 'selector/:value'
})

然后您可以像这样推送页面，将您的动态值作为 navParam 传递。

this.navCtrl.push('detail-page', {
  'value': detailInfo.value
})

【讨论】：

你不明白这个问题。我谈到了使用一个组件，而不是通过添加到堆栈来创建其他页面。选择该值后，用户应该会在地址栏中看到更改，并且仍保留在同一页面上。
对该问题进行更多澄清有助于更好地理解您的问题。据我所知，在带有History API 的浏览器中可以在不重新加载的情况下更新 url，但我认为在 Ionic 中还不可能。

【解决方案2】：

从 3.6 版开始无法实现

你可以这样做：

window.history.replaceState('', '', '#/selector/' + value); 

// optionally update navCtrl data
this.navCtrl.getActive().data.radioValue = value;

【讨论】：