javascript - 更改 NativeScript TabView 默认行为

Question

我正在构建一个 NS angular2 应用程序，我遇到了 TabView 组件默认行为的问题。我不希望它在创建组件时预加载所有数据。我怎样才能防止这种行为发生。我只想在用户点击某个选项卡后加载数据。

这是我的标签 View :

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