Question

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

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

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

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

Answer 1

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

就像烤面包可以

“正在加载...”

“连接良好/确定”

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

解决方案2

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

解决方案3

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

Answer 2

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

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

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

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

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

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

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

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

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脚本，因为它们都在我正在运行的可用软件包中。在移动应用中，它们应捆绑在您的应用中，而不是远程加载（与网站上发生的情况相反）。

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

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

2 个答案: