Ionic 3：如何预加载标签？

Question

I'm in a particular case where I absolutely need to make sure that document.querySelectorAll('.scroll-content')[0] , document.querySelectorAll('.scroll-content')[1] , etc are defined before the user enters the app. In other words : I need to preload my tabs .

The current behavior of tabs :

• doc...All('.scroll-content')[0] is defined.
• doc...All('.scroll-content')[1] is undefined.
• doc...All('.scroll-content')[2] is undefined.
• doc...All('.scroll-content')[3] is undefined.

The reason for this "state" is that the content of the page of a tab is loaded only when it is visited.

The behavior I expect from the tabs

• doc...All('.scroll-content')[0] is defined.
• doc...All('.scroll-content')[1] is defined.
• doc...All('.scroll-content')[2] is defined.
• doc...All('.scroll-content')[3] is defined.

So I need to be able to load the tabs pages before the user is visiting them for the first time.

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.

No success.

Any idea ?

PS : Please, no ugly stuff like programmatically selecting each tab before showing content. 🤮

EDIT : I'm still looking for a clean workaround, but I also posted a feature request on github . Feel free to participate.

Answer 1

Note that I speak from my own experience.

Background: I came across very similar approach where I render some content on the page with some external engine and need to make a reference to HTML generated by it within an Angular component. The problem is that putting the code in after view init lifecycle function wasn't enough.

Possible Solutions:

1. You could use setTimeout to wait for the HTML to be rendered
2. You can tap into ngDoCheck and check if the HTML has been rendered (if document.querySelector is truthy then you know you can move to your script).
3. Tapping to `ngDoCheck is expensive (after your initial load, your checks will still be fired). Hence it is better to use a combination of while loop and setTimeout. See pseudo-code below:

-

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

Answer 2

If you are using AOT and the ionic team is right (it is fast enough), I could see no reason why you would want to preload your tabs. Except maybe because you want to fetch some data?

If loading data is the case, you could fetch the data in something a tabService which you could inject in each tab.