nativescript在选项卡之间移动时重新加载页面内容

时间:2017-11-30 03:21:40

标签: mobile-application angular2-nativescript

将Nativescript与Angular一起使用。 在tabview的标签之间切换时,我们可以强制重新加载标签的内容吗?

  this.router.navigate(["/home", {outlets: { trustoutlet: ['trust']}}])

标签视图

<TabView #tabView [(ngModel)]="tabSelectedIndex" (selectedIndexChange)="onIndexChanged($event)" selectedColor="#d8292f">
    <ng-template tabItem title="Dashboard" iconSource="{{dashActive === true ? 'res://dashboard' : 'res://dashboard'}}">
        <StackLayout>
    <router-outlet name="dashoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
    <ng-template tabItem title="Properties" iconSource="{{propActive === true ? 'res://properties' : 'res://properties'}}">
        <StackLayout>
    <router-outlet name="propoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
    <ng-template tabItem title="Housekeeping" iconSource="{{trustActive === true ? 'res://trust' : 'res://trust'}}">
        <StackLayout>
    <router-outlet name="trustoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
    <ng-template tabItem title="More" iconSource="{{moreActive === true ? 'res://more' : 'res://more'}}">
        <StackLayout>
    <router-outlet name="moreoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
</TabView>

我希望能够拥有的是当用户导航到其时刷新的内务管理页面的内容。

是否可以在下次导航到缓存之前从缓存中删除其内容?

1 个答案:

答案 0 :(得分:0)

我找到的一个解决方案是创建一个空页面组件并将其加载到其他每个不可见的选项卡上,这样当它单击它的下一个选项卡将在空页面上重新加载组件时,这也修复了在每个选项卡上发出不同的动作栏。通过在空白页面上没有操作栏,当下一页被加载时,它的操作栏被用来代替前一页。

这些是选项卡页面上的其他子路径。

Hash (current timestamp + blabla +...) => like: 3a80f0c412c

newpage.html我只是在其上放了一个活动指示器,尽管它永远不会被看到。

{ path: 'freshhouse', component: NewPageComponent, outlet: 'trustoutlet'},
{ path: 'freshprop', component: NewPageComponent, outlet: 'propoutlet'},
{ path: 'freshdash', component: NewPageComponent, outlet: 'dashoutlet'},
{ path: 'fresh', component: NewPageComponent, outlet: 'moreoutlet'},

标签视图

<GridLayout #main_content rows="auto, *" class="main_content">
  <StackLayout class="indicator" [busy]="isLoading" row="0" verticalAlignment="center" horizontalAlignment="center" >
<ActivityIndicator [busy]="isLoading" row="0" verticalAlignment="center" horizontalAlignment="center"></ActivityIndicator>
</StackLayout>
</GridLayout>

onIndexChanged函数

<TabView #tabView [(ngModel)]="tabSelectedIndex" (selectedIndexChange)="onIndexChanged($event)" selectedColor="#d8292f">

如果其他人有更简单的解决方案,请随时回复。