Nativescript 加载自定义组件

Question

我尝试在加载选项卡时加载自定义组件（视图）。我的目录结构是：这是我的 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 模板创建项目，您可以在不使用 builder.loade 的情况下在 TabView 中加载自定义组件。您可以查看下面附带的示例，了解如何创建此类自定义组件并将其添加到 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 加载自定义组件

Nativescript loading custom component

nativescript