离子/角度模态被延迟加载

对于任何带有角度的离子模式,都有一些代码会被延迟加载。

toast为例。当您单击“配对”按钮时,将加载三个javascript文件(请参见下面的屏幕截图)。第二次单击“对”时,不会加载其他文件。

这对我来说是有问题的,因为我想在检测到Internet连接问题时向您展示祝酒词,因此需要完全预载祝酒词的代码。我不知道该怎么做。鉴于angular的延迟加载是基于路由的,所以我不了解烤面包机如何甚至可以开始使用延迟加载的代码。

离子/角度模态被延迟加载

编辑:我了解显示隐藏的吐司将以一种骇人听闻的方式解决该问题,但是我对延迟加载系统的工作方式特别感兴趣

wangleaishang9 回答:离子/角度模态被延迟加载

解决方案1 您可以使其预加载的是,当角度文件加载所有文件时向用户提供祝酒词,以便它也加载与祝酒词相关的文件。

就像烤面包可以

“正在加载...”

“连接良好/确定”

因此,以这种方式,烤面包文件会在开始时加载,并且当它们的网络较弱时,您可以烤面包一条消息,并且在文件被预加载时可以正常工作。

解决方案2

您可以像隐藏的烤面包一样烘烤隐藏样式的烤面包,以使其不可见,并且为此烤面包在第一次加载文件。

解决方案3

您可以将这些文件链接作为预加载策略添加到index.html文件中,以便即使不使用它们也可以加载这些文件,还可以设置缓存策略,以便即使网络故障一次也可以将先前缓存的文件放入工作,您可以在没有互联网的情况下向用户发送消息。

,

假设您在此处构建移动应用程序:

  

这对我来说是个问题,因为我想在   检测到互联网连接问题,

我认为您正在尝试解决错误的问题。您无需担心延迟加载方面,而应确保应用程序捆绑包中所有文件都可用!

  

我不明白烤面包片怎么甚至可以有延迟加载的代码来   开始。

这很容易解释。实际在屏幕上呈现组件的代码,它确定位置,大小,颜色,字体,持续时间等。不需要在核心模块中的代码,因此仅当您尝试将其第一次使用时才加载时间。所有需要加载的就是确认该组件存在以及如何获取它的指令。

  

这对我来说是个问题,因为我想在   已检测到互联网连接问题,因此该吐司的代码   需要完全预加载。

这并非完全正确。它需要可用,而不是预先加载。我认为,如果您可以弄清楚为什么要从远程服务器加载文件(例如在问题中发布的示例),则可以解决此问题。

为了说明,我刚刚创建了一个全新的离子应用程序并执行了它:

ionic start myapp tabs
ionic serve

我已将tab1.page.ts更改为在示例生成的链接之一中包含离子烘烤代码和click事件:

Tab1.page.ts:

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-tab1',templateUrl: 'tab1.page.html',styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(public toastController: ToastController) {}


  doIt() {
    console.log('done it');
    this.presentToast();
  }

  async presentToast() {
    const toast = await this.toastController.create({
      message: 'Your settings have been saved.',duration: 2000
    });
    toast.present();
  }

}

Tab1.page.html:

<ion-item (click)="doIt()">
<ion-icon slot="start" color="medium" name="book"></ion-icon>
    <ion-label>Ionic Documentation</ion-label>
</ion-item>

看下面的截图。我的互联网关闭了,我仍然可以延迟加载Toast脚本,因为它们都在我正在运行的可用软件包中。在移动应用中,它们应捆绑在您的应用中,而不是远程加载(与网站上发生的情况相反)。

Ionic running offline

现在,如果您是在网页上而不是应用程序中运行此程序,则需要使用其他答案中提供的解决方案之一。我找不到合适的方法来注入Toast脚本,因此,如果必须这样做,我会在加载应用程序时在屏幕下方显示不可见的Toast,这样就看不见了。

本文链接:https://www.f2er.com/3157702.html

大家都在问