如何在 Angular 10 中急切加载 ion-modal

问题描述 投票:0回答:2

需要明确的是,我认为这个问题与路由延迟加载完全无关,因为这个问题出现在引导组件中,无法按预期运行。

我有一个离子模式,当没有检测到网络时,它会从基础 app.component 触发。我需要确保离子模式脚本在发送初始有效负载后可用;但是,当我加载应用程序然后在网络调试器选项卡中关闭网络时,它是延迟加载离子模式。

vendor.js:41664 ChunkLoadError: Loading chunk 20 failed.

所引用的脚本在其 webpack 注释中具有以下内容,并且似乎完全是离子模式代码。

./node_modules/@ionic/core/dist/esm/ion-modal.entry.js

如果我触发模式显示然后隐藏,则块会成功加载,并且在网络调试器中触发时以下网络错误模式会按预期工作。当我尝试搜索有关急切加载的文章时,它总是与路由有关,而这不是我在这里寻找的内容。

angular ionic-framework ionic4
2个回答
2
投票
<ion-modal style="display:none;">

可以与 JIT 编译的模板一起使用以在需要时预加载脚本,但与 AOT 编译的模板一起使用时会失败。因此,目前的解决方案是在引导过程中以编程方式呈现然后关闭模式,或者尽早在 IonicModule 可用后完成。

  // Call this somewhere early where IonicModule has been imported, we are doing it in the app.component.ts constructor in our example
  async preloadModal() {
    let tempModal = await this.modalController.create({
      animated: false, // this should prevent it from being visible
      swipeToClose: false, // disable interaction to prevent unexpected behavior
      backdropDismiss: false, // disable interaction to prevent unexpected behavior
      showBackdrop: false, // minimize changes to UI
      keyboardClose: false, // minimize side-effects
      component: MyModalComponent, // Your custom modal component likely won't render, be sure to preload any related assets inside the index.html <head> tags
      componentProps: {
        // your component props, if needed
      }
    });
    await tempModal.present();
    await tempModal.dismiss();
  }

相关github问题


0
投票

modal:any; async hiddenModal() { const modal = await this.modalCtrl.create({ component: EditorComponent }); modal.hidden=true; modal.onDidDismiss().then(() => { this.modal=null; }); await modal.present(); this.modal = modal; } async showModal() { if(this.modal) this.modal.hidden=false; else { const modal = await this.modalCtrl.create({ component: EditorComponent, }); modal.onDidDismiss().then(() => { this.modal = null; }); await modal.present(); this.modal = modal; } }

© www.soinside.com 2019 - 2024. All rights reserved.