ionic-framework - 如何在 NavParams 中设置属性以更新 Ionic 中的 url 路径?

标签 ionic-framework ionic2 ionic3

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

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 Page dynamic links 。在组件顶部添加 @IonicPage() 装饰器,并使用动态值指定一个段。

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

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

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

关于ionic-framework - 如何在 NavParams 中设置属性以更新 Ionic 中的 url 路径?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45063747/

相关文章:

javascript - 如何在 Ionic 中打印 JSON 数据

jquery-mobile - xamarin和ionic在跨平台移动开发中的比较

javascript - 使用 Angular 从 Firestore 数据库返回多个集合

cordova - 它可以用于构建桌面应用程序(linux、OSX、Win)吗?

unit-testing - Angular 2 (Mock Ionic2) -- 没有应用程序的提供者

javascript - 等待 Ionic 中的订阅方法

android - Ionic Framework 从一个页面导航到另一个页面

angular - 如何在 ionic2 中调整项目分隔符的大小

css - 如何在 Ionic 2 中将文本换行到 <ion-segment-button> 中

angular - 如何从 Ionic 动态选择选项中获取 ID 值和 NAME 值