Question

我在加载标签时尝试加载自定义组件（View）。我的目录结构是：这是我的tablist.html页面：

       var myComponentInstance = builder.load({
            path: "pages/product/product.component",
            name: "product_lists"
        });

this.tabviewitems.push（{“title”：this.subCategories [index]，“view”：myComponentInstance}）;

我的观点没有被加载。 view._inheritProperties不是nativescript中的函数请帮助我。

Answer 1

所以你试图以编程方式生成TabView？我建议将页面实例放在builder.load函数中：

var myComponentInstance = builder.load({
    path: "pages/product/product.component",
    name: "product_lists",
    page: myPage
});

然后生成TabView UI：

let itemsArray = [];
let tabView = new TabView();
tabView.selectedColor = new Color("#000000");
for (let i in someArray) {
    let tabEntry = {
        title: someArray[i],
        view: customView 
    };
    items.push(tabEntry);
}
tabView.items = items;

Answer 2

如果您使用NativeScript Anguler2模板创建项目，则可以在TabView中加载自定义组件而不使用builder.loade。您可以查看以下附加示例，了解如何创建此类自定义组件并将其添加到TabView中。

product.component.ts

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


@Component({
    selector: 'product-component',
    template: `
        <StackLayout>
            <Label [text]="data" class="name"></Label>
        </StackLayout>
    `
})
export class ProductComponent {
    @Input() data: string;
}

app.component.html

<GridLayout>
    <TabView #tabView>
        <StackLayout *tabItem="{title: 'Tab1'}">
            <product-component data="Sample title" ></product-component>
        </StackLayout>
        <StackLayout *tabItem="{title: 'Tab2'}">
            <Label text="This is Label in Tab 2"></Label>
        </StackLayout>
    </TabView>
</GridLayout>

main.ts

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import {ProductComponent} from "./product.component"

@NgModule({
    declarations: [AppComponent, ProductComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

重要的是在main.ts文件的声明中添加自定义组件。要在不同组件之间共享数据，您可以在项目中使用@Input()。您可以阅读更多相关信息here

Nativescript加载自定义组件

2 个答案: