【问题标题】: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 时,删除titleview 上的双引号。我没有看到您将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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多