Búsqueda de sitios web

javascript - cambiar el comportamiento predeterminado de TabView en NativeScript


Estoy construyendo una aplicación NS angular2 y encuentro un problema con el comportamiento predeterminado del componente TabView. No quiero que cargue todos los datos cuando se crea el componente. ¿Cómo puedo evitar que esto suceda? Solo quiero cargar datos para una pestaña determinada una vez que el usuario haga clic en ella.

Aquí está mi vista de pestañas:

<TabView  #tabview (selectedIndexChange)="onIndexChanged($event)" class="tab-view" sdkToggleNavButton> 
    <StackLayout *tabItem="{title: 'Summary', iconSource: 'res://ic_summary'}" >
        <summary></summary>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Dash', iconSource: 'res://ic_dashboard'}">
        <dashboard></dashboard>
    </StackLayout>
    <StackLayout *tabItem="{title: 'My players', iconSource: 'res://ic_players'}" >  
        <myplayers></myplayers>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Details', iconSource: 'res://ic_details'}" > 
        <playerdetails></playerdetails>
    </StackLayout>
</TabView>

Puedo hacer que se invoque el evento onIndexChanged en el mismo .ts de TabView, sin embargo, TENGO que notificar al resumen, al panel de control y a los componentes internos.

Ejemplo de componente que necesita ser notificado:

@Component({
selector: “summary”,
templateUrl: ‘summary.component.html’
})
export class SummaryView extends View {

constructor(args:Page){
   super();
}

}

Respuesta #1

Como él dice, puedes

@Component({
selector: “summary”,
templateUrl: ‘summary.component.html’
})
export class SummaryView extends View {
public tabSelectedIndex: number = n; ...}

y plantilla

<TabView [(ngModel)]="tabSelectedIndex" ...> 
    <StackLayout *tabItem="{title: 'Summary', iconSource: 'res://ic_summary'}" >
        <summary *ngIf="tabSelectedIndex === n"></summary>
    </StackLayout>

Artículos relacionados