Ionic 如何在Angular 10中快速加载离子模式

qjp7pelc 于 2023-11-15 发布在 Ionic

关注(0)|答案(2)|浏览(185)

需要说明的是，我不认为这个问题与路由延迟加载有关，因为这个问题是在一个引导组件中，它无法按预期运行。
我有一个离子模态，当没有检测到网络时，它会从基本应用程序触发。我需要确保离子模态脚本在发送初始有效负载后可用;然而，当我加载应用程序然后在网络调试器选项卡中关闭网络时，它是延迟加载离子模态。vendor.js:41664 ChunkLoadError: Loading chunk 20 failed.
所引用的脚本在其webpack注解中包含以下内容，并且似乎完全是离子模态代码。./node_modules/@ionic/core/dist/esm/ion-modal.entry.js
如果我触发了一个模式来显示然后隐藏，块被成功加载，并且当在网络调试器中触发时，下面的网络错误模式会像预期的那样工作。当我试图搜索关于即时加载的文章时，它总是关于路由的，这不是我在这里要找的。

ionic-framework

来源：https://stackoverflow.com/questions/66991523/how-to-eagerly-load-ion-modal-in-angular-10

2条答案

按热度按时间

au9on6nz1#

在ionicv4.x中，这是不可能的，因为它看起来覆盖组件是在运行时注册的。虽然<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();
  }

字符串
Related github issue

赞(0）回复(0）举报 2023-11-15

j7dteeu82#

我使用了另一种替代方法：

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;
      }
    }

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

Ionic 如何在Angular 10中快速加载离子模式

2条答案

相关问题

热门标签

最新问答