美文网首页
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