Nativescriptカスタムコンポーネントをロードしています

Question

タブを読み込んだときにカスタムコンポーネント（ビュー）をロードしようとしました。 私のディレクトリ構造は以下の通りである：（{myComponentInstance： "ビュー"、this.subCategories [インデックス] "タイトル"}）

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

this.tabviewitems.push： これは私tablist.htmlページであります

私のビューが読み込まれていません。 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