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

Question

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

Angular-NativeScript项目是否有任何方法。

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

我希望这有帮助！