离子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。问题是在查看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并且离子团队是正确的（它足够快），我看不出你想要预加载标签的原因。除了可能是因为你想获取一些数据？

如果是这样的加载数据，你可以在tabService中获取数据，你可以在每个标签中注入。