Nativescript 사용자 정의 구성 요소

Question

나는 A A nativescript 사용자 지정 구성 요소 http://moduscreate.com/custom-components-in-nativescript/을 만들려면이 가이드를 따라했지만 내가 폴더를이 주요라는 내부 폴더와 페이지이 나

을 위해 작동하지 않습니다. 주요 파일

main.html의 몇 가지를 가지고

<StackLayout 
xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:hello="pages/helllo" 
loaded="pageLoaded" > 
    <hello:hello/> 
</StackLayout> 

main.component.ts

import { Component, ElementRef, OnInit, ViewChild} from "@angular/core"; 
import { Page } from "ui/page"; 
import colorModule = require("color"); 
var Color = colorModule.Color; 
@Component({ 
selector: "my-app", 
templateUrl: "pages/main/main.html", 
styleUrls: ["pages/main/main-common.css"] 
})  
export class MainComponent implements OnInit{ 
     constructor(private page: Page) { 
    }  

    ngOnInit() { 
    this.page.actionBarHidden = true; 
} 
} 

나는 또한 메인 common.css이 그러나 그것은 중요하지 않습니다. 그때 나는 내가 무엇을

<StackLayout width="100%" height="100%" backgroundColorr="red"> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
    <Label class ="h1" text="h1 hello world" color="black"></Label> 
</StackLayout> 

는 안녕 구성 요소에 상관없이 보여주는되지 그러나 hello.html

그 안에 하나의 파일로 안녕하세요라는 페이지 안에 다른 폴더가 빈 화면 만 나타납니다. 나는 또한이 라인을 변경하려고 시도했다 xmlns:hello="pages/helllo"hello.html이 파일에 xmlns:hello="../helllo"하지만 아무것도 얻지 못했습니다 심지어 오류. 누군가 내가 잘못하고있는 것을 지적 할 수 있습니까?

Answer 1

NativeScript 코어에서는 유효하지만, 에서는 작동하지 않습니다. NativeScript + Angular-2.

대신 사용자 정의 구성 요소 인 각도 2를 만드는 것이 필요합니다. 사용자 지정 항목 구성 요소가 생성되는 this sample을 참조 할 수 있음을 보여줍니다. 이 예제는 documentation에도 설명되어 있으며이 구성 요소의 @Input 지시문을 사용하여 데이터를 바인딩하는 방법을 보여줍니다.

절차를 안내해 드리겠습니다.

1) 만들기 사용자 정의 구성 요소

사용하여 항목-template.component.ts

import { Component, ChangeDetectionStrategy, Input } from "@angular/core"; 

@Component({ 
    selector: 'item-component', 
    styleUrls: ["listview/using-item-template/using-item-template.component.css"], 
    template: ` 
     <StackLayout *ngFor="let element of data.list" class="model"> 
      <Label [text]="element.model" class="name"></Label> 
      <Label [text]="element.speed +'mph'" class="speed"></Label> 
     </StackLayout> 
    ` 
}) 
export class ItemComponent { 
    @Input() data: any; // this way we "pass data" to our item-component 
} 

@Component({ 
    selector: 'using-item-template', 
    styleUrls: ["listview/using-item-template/using-item-template.component.css"], 
    templateUrl: "listview/using-item-template/using-item-template.component.html", 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class UsingItemTemplateComponent { 
    public manufacturers: Array<any>; 

    constructor() { 
     var bugatti = [{ "model": "Bugatti Chiron", "speed": "261" }, { "model": "Bugatti Veyron Super Sport", "speed": "268" }]; 
     var mclaren = [{ "model": "McLaren P1", "speed": "211" }, { "model": "McLaren F1", "speed": "242" }]; 
     var jaguar = [{ "model": "Jaguar XJ220", "speed": 217 }]; 
     this.manufacturers = [{ "list": bugatti }, { "list": mclaren }, { "list": jaguar }]; 
    } 
} 

사용하여 항목-template.component.html

<StackLayout exampleTitle toggleNavButton> 
    <GridLayout rows="50, *" class="example-container"> 
     <Label text="Top Cars" row="0" class="title" textWrap="true" horizontalAlignment="center"></Label> 
     <ListView [items]="manufacturers" row="1"> 
      <template let-item="item"> 
       <item-component [data]="item" ></item-component> 
      </template> 
     </ListView> 
    </GridLayout> 
</StackLayout> 

마지막으로 중요한 부분은 NgModule에서 ItemComponent를 선언하는 것을 잊지 않는 것입니다!

메인.TS

import { ItemComponent } from "./listview/using-item-template/using-item-template.component"; 

@NgModule({ 
    declarations: [ 
     ItemComponent, // declare the item component 
     // the other components in your app 
    ], 
    bootstrap: [AppComponent], 
    imports: [ 
     ..... 
    ], 
}) 
class AppComponentModule { }