选项卡内的 NativeScript-Angular Tabview 自定义视图答案

【问题标题】：NativeScript-Angular Tabview Custom View inside Tabs选项卡内的 NativeScript-Angular Tabview 自定义视图
【发布时间】：2017-05-07 15:02:50
【问题描述】：

我正在尝试实现 NativeScript-Angular Tabview，我能够创建带有标签和图像的选项卡。我已经看到了使用 .xml 文件组件的 Nativescript 示例。

Angular-NativeScript 项目有什么方法吗？

【问题讨论】：

您说可以创建带有内部元素的选项卡。我想我不明白这个问题。

标签： nativescript angular2-nativescript

【解决方案1】：

官方文档提供。

https://docs.nativescript.org/angular/cookbook/tab-view-ng

请看下面的例子：

table-view-test.ts 文件是您的 TypeScript 组件：

import { Component } from "@angular/core";

export class DataItem {
    constructor(public itemDesc: string) {}
}

@Component({
    selector: "tab-view-test",
    templateUrl: "tab-view-test.html"
})
export class TabViewTest {
    public items: Array<DataItem>;

    constructor() {
        this.items = new Array<DataItem>();
        for (let i = 0; i < 5; i++) {
            this.items.push(new DataItem("item " + i));
        }
    }
}

tab-view-test.html 文件是您的 HTML 模板：

<TabView selectedIndex="1" selectedColor="#FF0000">
    <StackLayout *tabItem="{title: 'Tab 01'}">
       <Label text="Primary tab item"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab 02'}">
       <Label text="Second tab item"></Label>
    </StackLayout>
</TabView>

我希望这会有所帮助！

【讨论】：