Как сделать настоящую ленивую загрузку с помощью вкладок nativescript angular и BottomNavigation - PullRequest
Новая
       46

Как сделать настоящую ленивую загрузку с помощью вкладок nativescript angular и BottomNavigation

0 голосов
/ 14 апреля 2020

Я реализую приложение с nativescipt. Я добавил BottomNavigation (следуя некоторым примерам для inte rnet) с lazyLoading и собираюсь сделать то же самое с компонентом 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, по крайней мере, был бы полезен для некоторых вкладок, но я добавил console.log () для всех трех компонентов вкладок, и все они были запущены , Я прочитал, что этим поведением можно управлять в TabView, используя свойство 'androidOffscreenTabLimit'

, поэтому возникают следующие вопросы: 1) Как я могу контролировать поведение предварительной загрузки для BottomNavigation и Tab 2) Могу ли я вообще отключить предварительную загрузку? 3) А что означает слово «по крайней мере 1 в сторону»?

Заранее спасибо.

1 Ответ

1 голос
/ 15 апреля 2020

С компонентом Tabs по крайней мере текущая и следующая / предыдущая вкладки предварительно загружены. Вы можете избежать предварительной загрузки, если вместо этого используете BottomNavigation.

Также, когда вы используете Angular и отложенную загрузку, путь для каждой розетки обычно устанавливается сразу, что приведет к загрузке всех модулей одновременно. Чтобы избежать этого, вы можете сначала задать путь только для основного выхода, а затем указать путь для других выходов в качестве вкладок изменения пользователя. Но это может привести к дополнительным затратам, если цель состоит в том, чтобы узнать, когда вкладка фактически рендерится, тогда вы можете просто использовать событие 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 тогда вы можете добавить условия, чтобы убедиться, что вы уже загрузили данные.

...