Modal彈出框

2020-10-15  本文已影响0人  BUTIMHERE

根據官網的步驟,在傳值時,在Modal頁面使用@Input接收,似乎接收不到,於是使用NavParams來接收,如下:

   import {NavParams,ModalController} from '@ionic/angular';

  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
  })
  export class LoginComponent implements OnInit {

    constructor(public nav:NavParams,
      private modalController: ModalController) { 
      console.log(nav.data);
    }

在關閉頁面回傳值時,可用ModalController ,也可以用NavParams:

  doClose(){
var p={
  'value':123,
  'text':'猜猜看'
}
this.nav.data.modal.dismiss(p);

// this.modalController.dismiss(p);
}

在開啓模態框的寫法中加入 const {data}

async showModal(){
const modal = await this.modalController.create({
  component: LoginComponent,
  cssClass: 'my-custom-class',
  componentProps: {
    'firstName': 'Douglas',
    'lastName': 'Adams',
    'middleInitial': 'N'
  }
});

await modal.present();

 const { data } = await modal.onWillDismiss();
 console.log(data);

}

上一篇 下一篇

猜你喜欢

热点阅读