Nativescript 加载自定义组件答案

【问题标题】：Nativescript loading custom componentNativescript 加载自定义组件
【发布时间】：2016-09-20 11:09:28
【问题描述】：

我尝试在加载选项卡时加载自定义组件（视图）。我的目录结构是：这是我的 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 中的函数请帮帮我。

【问题讨论】：

标签： nativescript

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

【讨论】：

是的，我正在尝试动态加载 Tabview。如何获得“myPage”，实际上我正在尝试加载“product_lists.html”页面。
如果我错了请告诉我。我了解您在一个页面中，并且您正在该页面内动态生成 TabView。然后您想将另一个页面（即product_lists 页面）加载到 TabView 项中。你能再发一些XML和js文件让我看得更清楚吗？
是的..你是对的。我希望我的 productList.html 页面在这个 tabview 中。我的 tablistComponet.ts 文件是：for (var index = 0; index
1.您不需要包含.html，只需包含name: "product_lists" 2. 当您推送到tabViewItems 3 时，删除title 和view 上的双引号。我没有看到您将this.tabviewitems 分配给任何TabView 实例
仍然出现同样的错误。 view._inheritProperties 不是 nativescript 中的函数

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

【讨论】：