이 가이드를 따라 네이티브 스크립트 사용자 정의 구성 요소 http://moduscreate.com/custom-components-in-nativescript/를 만들었지 만 작동하지 않습니다.
main 이라는 폴더 가있는 폴더 페이지 가 있습니다. main 에는 몇 개의 파일이 있습니다.
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;
}
}
또한 main-common.css가 있지만 표시하는 데 중요하지 않습니다. 그런 다음 페이지 안에 hello 라는 다른 폴더가 있고 그 안에 파일 하나만 있습니다.
hello.html
<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 구성 요소는 내가 무엇을하든 표시되지 않습니다. 빈 화면 만 나타납니다. 또한 hello.html 파일 에서이 줄 xmlns:hello="pages/helllo"을 이것으로 변경하려고 시도했지만 오류가 발생하지 않았습니다. 누군가 내가 뭘 잘못하고 있는지 지적 할 수 있습니까?xmlns:hello="../helllo"
NativeScript Core에서는 유효하지만 NativeScript + Angular-2 에서는 작동하지 않습니다 .
대신 필요한 것은 Angular-2 방식으로 사용자 지정 구성 요소를 만드는 것입니다. 데모를 위해 사용자 지정 항목 구성 요소가 생성 된 이 샘플을 참조 할 수 있습니다 . 예제는 문서 에도 설명되어 있으며이 구성 요소에 대해 @Input 지시문을 사용하여 데이터를 바인딩하는 방법도 보여줍니다.
과정을 안내해 드리겠습니다.
1.) 사용자 지정 구성 요소 만들기
using-item-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 }];
}
}
using-item-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를 선언하는 것을 잊지 않는 것입니다!
main.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 { }
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다