美文网首页
Modal彈出框

Modal彈出框

作者: BUTIMHERE | 来源:发表于2020-10-15 18:37 被阅读0次

根據官網的步驟,在傳值時,在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);

}

相关文章

网友评论

      本文标题:Modal彈出框

      本文链接:https://www.haomeiwen.com/subject/lppopktx.html