Question

我正在使用ionic4和angular。 l具有此页面设置内容的广播组。

如何执行操作，当用户单击此选项之一时，他会将值直接推到主页。然后使用他在首页中选择使用的值来显示数据json的信息。

页面设置代码

   export class PopoverstationsPage implements OnInit {
      cities :any
      constructor(public nav : NavController) { }

      ngOnInit() {
        console.log(this.cities)
      }

    }

html

    <ion-list>
            <ion-radio-group [(ngModel)]="cities">
                <ion-list-header>
                    <ion-label>Name</ion-label>
                </ion-list-header>

                <ion-item>
                    <ion-label>ميناء خصب</ion-label>
                    <ion-radio slot="start" value="26.2105,56.244" ></ion-radio>
                </ion-item>

                <ion-item>
                    <ion-label>مطار خصب</ion-label>
                    <ion-radio slot="start" value="26.161722,56.23672"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>دبا</ion-label>
                    <ion-radio slot="start" value="25.615627,56.247322"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>البريمي</ion-label>
                    <ion-radio slot="start" value="24.233913,55.916176"></ion-radio>
                </ion-item>

            </ion-radio-group>
      </ion-list>

主页天气

    export class HomePage implements OnInit {
      cities :any
      constructor(public nav : NavController, private https: HttpClient) { }

      ngOnInit() {
        this.test ()
      }

async test (){

  this.https.get('weather/'+this.cities+'.json')
  .subscribe(data => {

    this.weather = data

  })


}

    }

Answer 1

您可以使用ionChange的{{1}}事件来捕获选定的ion-radio-group，使用radio-button的{{1}}方法来传递选定的{{ 1}}到push。

NavController的设置页面

radio-button

HomePage的设置页面

HTML

您可以通过<ion-radio-group (ionChange)="onRadioChange()" [(ngModel)]="cities"> ..... </ion-radio-group>内的TS来选择城市。

import { NavController } from 'ionic-angular';

export class SettingPage {

  cities;

  constructor(public navCtrl: NavController) {}

    onRadioChange() {

      if (this.cities) {

      this.navCtrl.push(HomePage, { cities: this.cities });
      }
    }
}

查找StackBlitz Example Here.，但它是Ionic3，因为StackBlitz尚不支持Ionic4。尝试根据需要进行调整。

将导航参数推到另一页

1 个答案: