更改 NativeScript TabView 默认行为答案

【问题标题】：change NativeScript TabView default behaviour更改 NativeScript TabView 默认行为
【发布时间】：2017-08-04 02:38:26
【问题描述】：

我正在构建一个 NS angular2 应用程序，但我遇到了 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();
}

}

【问题讨论】：

这几乎就像您必须检测当前正在查看的选项卡，然后有条件地加载每个选项卡。 if => tab2，然后加载 tab2 的内容。

标签： javascript ios typescript mobile nativescript

【解决方案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>

【讨论】：