如何在Ionic中将属性设置为NavParams以获取更新url路径?

时间:2017-07-12 17:04:09

标签: ionic-framework ionic2 ionic3

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

网址:[domain] / selector /:value

@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。

2 个答案:

答案 0 :(得分:4)

您可以使用Ionic Page dynamic links。在组件顶部添加DAEMON_PIDFILE_TIMEOUT装饰器,并指定包含动态值的段。

@IonicPage()

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

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

答案 1 :(得分:1)

从版本3.6开始不可能

你可以这样做:

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

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