Пользовательский компонент загрузки Nativescript

Question

Я пытаюсь загрузить пользовательские компоненты (Просмотр), когда загружаются табуляции. моя структура каталогов: это моя tablist.html страница:

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

this.tabviewitems.push ({ "название": this.subCategories [индекс], "вид": myComponentInstance});

мой взгляд не загружается. view._inheritProperties не является функцией в nativescript Пожалуйста, помогите мне.

Answer 1

Итак, вы пытаетесь сгенерировать TabView программно? Я предлагаю положить экземпляр страницы внутри builder.load функции:

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

Тогда при генерации TabView интерфейса:

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