NativeScript ListView项目在路由回到BottomNavigation组件后消失

Question

在我的NativeScript应用程序中，有一个BottomNavigation选项卡：

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsComponent,
        children: [
            {
                path: 'feed',
                loadChildren: '~/app/pages/feed/feed.module#FeedModule',
                component: NSEmptyOutletComponent,
                outlet: 'feedTab'
            },
            {
                path: 'notification',
                loadChildren: '~/app/pages/notification/notification.module#NotificationModule',
                component: NSEmptyOutletComponent,
                outlet: 'notificationTab'
            },
            {
                path: 'create',
                loadChildren: '~/app/pages/create/create.module#CreateModule',
                component: NSEmptyOutletComponent,
                outlet: 'createTab'
            },
            {
                path: 'profile',
                loadChildren: '~/app/pages/profile/profile.module#ProfileModule',
                component: NSEmptyOutletComponent,
                outlet: 'profileTab'
            }
        ]
    }
];

并且在这些子选项卡之一中，有一个项目的RadListView：

<ActionBar id="profile-action-bar" title="Notifications"></ActionBar>
<GridLayout>
  <RadListView separatorColor="transparent" class="notification-list" [items]="notificationList"
    (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" loadOnDemandMode="Auto"
    (itemTap)="onNotificationTap($event)">
    <!-- (itemTap)="onGoalTap($event)" -->

    <ng-template let-item="item" let-i="index">
      <ns-notification-item [item]=item [position]=i></ns-notification-item>
    </ng-template>

  </RadListView>
</GridLayout>

导航到该选项卡时，列表将按预期的方式填充，但是如果您导航到另一个选项卡的子组件，然后直接返回到BottomNavigation：

子组件：

this.router.navigate([
     '../tabs'
  ]);

先前加载的ListView中的所有项目都已消失...但是之前未加载的项目将开始填充列表：

Answer 1

[路由器出口和页面路由器出口有很大的不同。在网络上，当您导航时，当前路线上的所有组件都将被销毁，并呈现导航路线的新组件。

对于移动应用程序，您保留导航堆栈，然后从您的左上角返回上一页。为此，您可以使用Page Router Outlet，并且要处理Page Router Outlet，您需要RouterExtensions

[要返回历史记录的上一页时，应在back()上调用RouterExtensions方法。

Updated Playground