Как открыть страницу другого компонента при выборе опции в ion-select in ionic 3

Question

Я хочу, чтобы другая страница компонента открывалась, когда пользователь выбирает опцию из ion-select в ionic3.Может кто-нибудь, пожалуйста, помогите, что делать?заранее спасибо.Ниже мой код выбора иона ..

<ion-content>
    <ion-list>
        <ion-item>
            <ion-label>ENGINEERING &amp; TECHNOLOGY</ion-label>
            <ion-select [(ngModel)]="engineering">
                <ion-option value="cse">CSE</ion-option>
                <ion-option value="fse">FSE</ion-option>
                <ion-option value="mee">MEE</ion-option>
                <ion-option value="cve">CVE</ion-option>
                <ion-option value="age">AGE</ion-option>
                <ion-option value="che">CHE</ion-option>
                <ion-option value="eee">EEE</ion-option>
            </ion-select>
        </ion-item>
    </ion-list>
</ion-content>

Answer 1

Создайте новое свойство для хранения изменяющегося идентификатора страницы.Получить ссылку на элемент select с помощью @ViewChild.Метод поможет перемещаться в соответствии с выбранным значением: кнопка Ok будет реагировать на (ionchange)

Машинопись:

  @ViewChild('select') select;
  pageId=1;
  constructor(public navCtrl: NavController) {

  }
  onClick() {

    if(this.pageId===1){
    this.navCtrl.push(ContactPage);
    }
    this.select.close();

  }

HTML

<ion-select #select (ionChange)="onClick()" [(ngModel)]="engineering">
                <ion-option (ionSelect)="pageId=1" value="cse">CSE</ion-option>

....

Демо

Answer 2

В вашем page.html,

<ion-label>ENGINEERING &amp; TECHNOLOGY</ion-label>
<ion-select [(ngModel)]="engineering" (ionChange)="OpenPage()">
<ion-option value="cse">CSE</ion-option>
<ion-option value="fse">FSE</ion-option>
<ion-option value="mee">MEE</ion-option>
<ion-option value="cve">CVE</ion-option>
<ion-option value="age">AGE</ion-option>
<ion-option value="che">CHE</ion-option>
<ion-option value="eee">EEE</ion-option>
</ion-select>

В вашем page.ts,

  OpenPage() {
    if (this.engineering === 'cse') {
      this.navCtrl.push(CSEPage);
    } else if (this.engineering === 'fse') {
      this.navCtrl.push(FCEPage);
    }
  }

Если вы хотите установить вновь открытую страницу в качестве корневой, используйте this.navCtrl.setRoot(Page) вместо * this.navCtrl.push(Page)