Ionic 3：如何预加载标签？

Question

我处于一种特殊情况，我绝对需要确保在用户进入应用程序之前定义了document.querySelectorAll('.scroll-content')[0]、document.querySelectorAll('.scroll-content')[1] 等。换句话说：我需要预加载我的标签。

标签的当前行为：

• doc...All('.scroll-content')[0] 已定义。
• doc...All('.scroll-content')[1] 未定义。
• doc...All('.scroll-content')[2] 未定义。
• doc...All('.scroll-content')[3] 未定义。

这种“状态”的原因是一个标签页的内容只有在被访问时才会被加载。

我期望的标签行为

• doc...All('.scroll-content')[0] 已定义。
• doc...All('.scroll-content')[1] 已定义。
• doc...All('.scroll-content')[2] 已定义。
• doc...All('.scroll-content')[3] 已定义。

所以我需要能够在用户第一次访问标签页之前加载它们。

Sadly the ionic team did remove the preloading of tabs in beta 12 because supposedly the AOT compilation is fast enough for us "not to need" to preload tabs. ????

I also tried to set my @IonicPages priority to high and specifying that I want to preload modules in app.module.ts.

没有成功。

有什么想法吗？

PS：请不要在显示内容之前以编程方式选择每个选项卡等丑陋的东西。 ????

编辑：我仍在寻找一个干净的解决方法，但我也发布了feature request on github。欢迎参与。

Answer 1

请注意，我是根据自己的经验发言。

背景： 我遇到了非常相似的方法，我使用一些外部引擎在页面上呈现一些内容，并且需要在 Angular 组件中引用由它生成的 HTML。问题在于将代码放在 view init 生命周期函数中是不够的。

可能的解决方案：

1. 您可以使用 setTimeout 等待 HTML 呈现
2. 您可以点击 ngDoCheck 并检查 HTML 是否已呈现（如果 document.querySelector 是真实的，那么您知道您可以转到您的脚本）。
3. 点击`ngDoCheck 是昂贵的（在您初始加载后，您的检查仍将被触发）。因此，最好结合使用 while 循环和 setTimeout。请参阅下面的伪代码：

-

ngOnViewInit() {
  let isReady = false;
  do {
    if (document.querySelectorAll('.scroll-content').length > 0) {
      isReady = true;
    }
  while (!isReady);
  this.runMyCodeThatNeedsThePagePreloaded();
}

Answer 2

如果您使用 AOT 并且 ionic 团队是正确的（它足够快），我看不出您为什么要预加载标签。除了可能是因为你想获取一些数据？

如果是加载数据，您可以在 tabService 中获取数据，您可以将其注入每个选项卡中。