在ionic 3中选择离子选择中的选项时如何打开另一个组件页面

Question

当用户从 ionic3 中的 ion-select 中选择一个选项时，我希望打开另一个组件页面。有人可以帮忙做什么吗？提前致谢。下面是我的离子选择代码..

<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

创建一个新属性来保存不断变化的页面 ID。使用@ViewChild 获取对选择元素的引用。一种方法将有助于根据选择值进行导航： 确定按钮将对 (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>

....

Demo

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)