How to NOT init all tabitems when itemview init?

android

#1

My code is like (with wrapped in app component):

          <TabView class="tab-view" androidTabsPosition="bottom">
            <StackLayout *tabItem="{iconSource: getIconSource('home')}">
                <home-tab></home-tab>
            </StackLayout>
            <StackLayout *tabItem="{iconSource: getIconSource('browse')}">
                <moment-tab></moment-tab>
            </StackLayout>
            <StackLayout *tabItem="{iconSource: getIconSource('search') }">
                <contact-tab></contact-tab>
            </StackLayout>
            <StackLayout *tabItem="{iconSource: getIconSource('browse') }">
                <setting></setting>
            </StackLayout>
        </TabView>

How to NOT init all tabitem when itemview init?
Currently, all tabitem (home-tab, moment-tab, contact-tab…) called ngOnInit and ngAfterViewInit event once enter tab.
Such behavior drastically slow the performance as I have some complex UI in and .
Is there any way to lazy init moment-tab, contact-tab… when I actually tapped the tabitem?


#2

It should not be an issue. Even though your component is initialised (calls onInit etc.,), it actually be rendered only when you reach that tab.

You may listen for loaded event of root view in that component to verify that.