Question

我正在构建一个NS angular2应用程序，我遇到了TabView组件的默认行为问题。我不希望它在创建组件时预加载所有数据。如何防止此行为发生。我只想在用户点击它时为某个标签加载数据。

这是我的tabview：

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

我可以在tabview的相同.ts中调用onIndexChanged事件，但是我必须通知摘要，仪表板，内部组件。

需要通知的组件示例：

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

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

}

Answer 1

正如他所说，你可以

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

和模板

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

更改NativeScript TabView的默认行为

1 个答案: