2017-11-30 5 views
0

Verwenden von Nativescript mit Angular. Beim Wechsel zwischen Tabs einer Tabview können wir den Inhalt des Tabs neu laden?nativescript neu laden Seiteninhalt beim Verschieben zwischen Tabs

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

Tab-Ansicht

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

Was will ich in der Lage sein, Seite zu haben, ist der Inhalt der Housekeeping aufgefrischt werden, wenn der Benutzer es navigiert.

Ist es möglich, seinen Inhalt aus dem Cache zu entfernen, bevor sie das nächste Mal zu ihm navigieren?

Antwort

0

Eine Lösung, die ich gefunden habe, war eine leere Seitenkomponente zu erstellen und diese auf jede der anderen Registerkarten zu laden, die nicht sichtbar sind. Auf diese Weise wird die Komponente beim nächsten Klicken auf die leere Seite neu geladen das Problem der verschiedenen Aktionsleisten auf jeder Registerkarte. Wenn auf der leeren Seite keine Aktionsleiste angezeigt wird, wird beim Laden der nächsten Seite die Aktionsleiste anstelle der vorherigen Seite verwendet.

Dies sind die zusätzlichen untergeordneten Routen auf der Registerseite.

newpage.html Ich habe nur einen Aktivitätsindikator darauf gesetzt, obwohl es nie gesehen werden sollte.

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

die Tab-Ansicht

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

Die onIndexChanged Funktion

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

Wenn jemand anderes hat eine einfachere Lösung dann fühlen Sie sich frei zu reagieren.

Verwandte Themen