另一个组件 Ionic 4 中的组件

Posted 2023-03-16

【中文标题】另一个组件 Ionic 4 中的组件

【英文标题】：Component inside of another Component Ionic 4

【发布时间】：2019-09-25 08:58:34

【问题描述】：

我正在将我的应用程序从Ionic 3 迁移到Ionic 4，我看到async and await calls 正在用于每个组件。我明白为什么要使用它，但在我的 Ionic 3 应用程序中，我在 Alert Controller Component 内有一个嵌套的 Loading Controller Component。

离子 3 .ts

submitAssetLoc(form: NgForm)

    const alert =  this.alertCtrl.create(
       header: 'Submit',
       message: 'Are you sure you want to Submit?',
       buttons: [
         
           text: 'Yes',
           role: 'Yes',
           handler: () => 
             const loading = this.loadingCtrl.create(
                           message: 'Submitting...'
                          );

          loading.present();

            this.stemAPI.updateGPSLoc(this.testData).subscribe((result) => 

              loading.dismiss();
              
            , (err) => 
                loading.dismiss();
                let alert = this.alertCtrl.create(

                header: 'Error: Could not submit!',
                message: 'Try submitting again, or submit offline!',
                buttons: [
                  
                    text: 'Try Submitting Again',
                    role: 'Yes',
                    handler: () => 
                    
                    this.newGPSLoc = [];
                  
                ,
                  
                    text: 'Submit Offline',
                    handler: () => 
                    
                    this.navCtrl.push(SuccessPage,  'APIresponse': 'Form submitted offline, please go to support page and re-submit!');
                    
                  
                ]
              );
              alert.present();
            
         )
         ,
         
           text: 'No',
           role: 'Cancel',
           handler: () => 

           
         
       ]
     );
    alert.present();
  

我的问题是 async,await 调用没有正确实现，我知道 我的代码显然效率不高。我假设我需要为每一个创建方法，但是正确实现此功能的最佳方法是什么？

【问题讨论】：

为什么不先将大量处理函数拆分成更小的函数？

【参考方案1】：

希望这会有所帮助

async submitAssetLoc(form: NgForm)

    const alert = await this.alertCtrl.create(
       header: 'Submit',
       message: 'Are you sure you want to Submit?',
       buttons: [
         
           text: 'Yes',
           role: 'Yes',
           handler: async () => 
             const loading = await this.loadingCtrl.create(
                           message: 'Submitting...'
                          );

          loading.present();

            this.stemAPI.updateGPSLoc(this.testData).subscribe((result) => 

              loading.dismiss();

            , async (err) => 
                loading.dismiss();
                let alert = await this.alertCtrl.create(

                header: 'Error: Could not submit!',
                message: 'Try submitting again, or submit offline!',
                buttons: [
                  
                    text: 'Try Submitting Again',
                    role: 'Yes',
                    handler: () => 

                    this.newGPSLoc = [];
                  
                ,
                  
                    text: 'Submit Offline',
                    handler: () => 

                    this.navCtrl.push(SuccessPage,  'APIresponse': 'Form submitted offline, please go to support page and re-submit!');
                    
                  
                ]
              );
              alert.present();
            
         )
         ,
         
           text: 'No',
           role: 'Cancel',
           handler: () => 

           
         
       ]
     );
    alert.present();