006 ioinc5 modeal之间的传值

首先创建页面

ionic g page biography

创建组件

ionic g component biography/components/modal

在biography页面所在的模块中引入刚才创建的modal组件，并声明

import { ModalComponent} from './components/modal/modal.component';
@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
],
declarations: [ModelPage,ModalComponent],
    entryComponents: [ModalComponent]    
})

在biography页面中引入刚才创建的modal组件，并且引入ModalController 弹出模态对话框

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalComponent} from './components/modal/modal.component';
@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class BiographyPage implements OnInit {
  constructor(public modalController: ModalController) {}
  ngOnInit() {
  }
  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalComponent,
      componentProps: { username: 'zhangsan' }   //传值
    });
    await modal.present();
    const { data } = await modal.onDidDismiss();//接收返回的数值
    console.log(data) //打印数值
    //...页面刷新等方法
  }
}

弹出的组件页面通过NavParams接受biography页面的传值

import { Component, OnInit } from '@angular/core';
import { NavParams } from '@ionic/angular';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class ModalComponent implements OnInit {
  constructor(public navParams: NavParams) {
    console.log(this.navParams);
    this.username = this.navParams.data.username
    console.log(this.navParams.data.username);
  }
  ngOnInit() {
  }
  closeModel(){
    this.navParams.data.modal.dismiss({
      'result': '返回点数据'
    });
  }
}

完整代码

biography.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalComponent} from './components/modal/modal.component';
import { NavParams } from '@ionic/angular';
@Component({
  selector: 'app-biography',
  templateUrl: './biography.page.html',
  styleUrls: ['./biography.page.scss'],
})
export class BiographyPage implements OnInit {
  constructor(public modalController: ModalController) {}
  ngOnInit() {
  }
  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalComponent,
      componentProps: { username: 'zhangsan'  }   //传值
    });
     await modal.present();
     const { data } = await modal.onDidDismiss();
     console.log(data)
  }
}

biography.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>biography</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
   <ion-button (click)="presentModal()">
     点击
   </ion-button>
</ion-content>

modal.component.html

<ion-header translucent="true" class="navbar-header">
  <ion-toolbar >
    <ion-buttons slot="start">
      <ion-button (click)="closeModel()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>点击后弹出的</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-input>{{username}}</ion-input>
</ion-content>

modal.component.ts

import { Component, OnInit,Input } from '@angular/core';
import { NavParams } from '@ionic/angular';
@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss'],
})
export class ModalComponent implements OnInit {
  username = ''
  constructor(public navParams: NavParams) { 
    console.log(this.navParams);
    this.username = this.navParams.data.username
    console.log(this.navParams.data.username);
  }
  ngOnInit() {}
  closeModel(){
    this.navParams.data.modal.dismiss({
      'result': '消失的时候返回的内容'
    });
  }
}