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

Question

使用与角度的nativecript。在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>

我想要拥有的是用户导航时要刷新的管家页面的内容。

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

Answer 1

我发现的一种解决方案是创建一个空页面组件并加载到其他每个选项卡上，那样的方式，当它单击的下一个选项卡时，它将重新加载组件空页面，这还解决了每个选项卡上不同动作栏的问题。通过在空页面上没有操作栏，下一页加载时，它的操作栏将代替上一个。

这些是标签页面上的其他子路由。

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

newpage.html我只是在上面放了一个活动指标，尽管永远不应该看到。

<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>

标签视图

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

OnIndexchanged函数

public onIndexChanged(args) {
     .......
  this.router.navigate(["/home", {outlets: { dashoutlet: ['freshdash'], propoutlet: ['freshprop'],  trustoutlet: ['freshhouse'], moreoutlet: ['more'] }}])
     .......
}

如果其他人有更简单的解决方案，请随时做出回应。