如何使用原始脚本角度选项卡和BottomNavigation进行真正的延迟加载

Question

我正在使用nativescipt实现应用。我已经通过lazyLoading添加了BottomNavigation（通过在互联网上遵循一些示例），并在子页面中使用Tab组件进行了添加。代码看起来像这样

export const routes: Routes = [
{
    path: '',
    redirectTo: '/(searchTab:search//contactsTab:contacts//accountTab:account)',
    pathMatch: 'full'
},

{
    path: 'search',
    component: NSEmptyOutletComponent,
    loadChildren: () => import('@src/app/components/search/search.module').then((m) => m.SearchModule),
    outlet: 'searchTab',
},
{
    path: 'contacts',
    component: NSEmptyOutletComponent,
    loadChildren: () => import('@src/app/components/contacts/contacts.module.tns').then((m) => m.InquiriesModule),
    outlet: 'inquiriesTab',
},
{
    path: 'account',
    component: NSEmptyOutletComponent,
    loadChildren: () => import('@src/app/components/account/account.module').then((m) => m.AccountModule),
    outlet: 'accountTab',
}

];

和标准HTML（不会在此复制，因为可以在NS文档中找到）

但是，根据NS文档，-

预加载：侧面至少1个（由于滑动手势）https://docs.nativescript.org/angular/ui/ng-components/tabs

我期望只有侧选项卡会被预加载，但帐户选项卡是第三个...我会接受这种行为，因为lazyLoading至少对某些选项卡有用，但是我向所有3个选项卡组件添加了console.log（）所有这些都被触发了我已经读到可以通过取消'androidOffscreenTabLimit'属性来在TabView中控制此行为]

所以问题如下：1）如何控制BottomNavigation和Tab的预加载行为2）我可以完全禁用预加载吗？3）“至少1边在边”是什么意思？

提前感谢。

Answer 1

使用标签页组件时，至少当前标签页和下一个/上一个标签页已预先加载。如果您改为BottomNavigation，则可以避免预加载。

另外，当您使用Angular＆lazy加载时，通常会立即设置每个出口的路径，这将立即加载所有模块。为避免这种情况，您可以最初只为主要出口设置路径，然后将其他出口的路径设置为用户更改选项卡。但这可能会产生开销，如果背后的目的是要知道该选项卡的实际呈现时间，则可以只使用loaded事件。

HTML

         <TabContentItem>
            <GridLayout rows="0, *, auto, auto" (loaded)="onLoaded(1)">
                <page-router-outlet name="searchTab" row="1" rowSpan="2"
                    actionBarVisibility="never">
                </page-router-outlet>
                <Label row="2" class="shadow"></Label>
                <Label row="3" class="bottom-border"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout rows="0, *, auto, auto" (loaded)="onLoaded(2)">
                <page-router-outlet name="accountTab" row="1" rowSpan="2"
                    actionBarVisibility="never">
                </page-router-outlet>
                <Label row="2" class="shadow">
                </Label>
                <Label row="3" class="bottom-border"></Label>
            </GridLayout>
        </TabContentItem>
        <TabContentItem>
            <GridLayout rows="0, *, auto, auto" (loaded)="onLoaded(3)">
                <page-router-outlet name="thirdTab" row="1" rowSpan="2"
                    actionBarVisibility="never">
                </page-router-outlet>
                <Label row="2" class="shadow"></Label>
                <Label row="3" class="bottom-border"></Label>
            </GridLayout>
        </TabContentItem>

TS

onLoaded(index) {
    console.log(`Tab ${index} loaded`);
}

注：加载事件可能在您每次访问标签时触发，如果您打算在此处进行API调用，则可能需要添加条件以确保是否已经加载了数据。