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

2 回答

• 0

  创建一个新属性以保存更改的页面ID . 使用@ViewChild获取select元素的引用 . 一种方法将有助于根据选择值导航：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>
  

  ....

  Demo

  回复于 2024-05-08T20:33:15+08:00
• 0

  在你的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)

  回复于 2024-05-08T20:33:15+08:00