我按照本指南创建了一个nativescript自定义组件http://moduscreate.com/custom-components-in-nativescript/但它不适合我
我有一个文件夹 pages ,里面有一个名为 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 ,但这并不重要 . 然后我在 pages 中有另一个名为 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.html 文件中的这一行 xmlns:hello="pages/helllo"
更改为 xmlns:hello="../helllo"
,但我没有得到任何错误甚至没有 . 谁能指出我做错了什么?
1 回答
您在NativeScript Core中引用的有效内容,但在 NativeScript + Angular-2 中无效 .
您需要的是以Angular-2方式创建自定义组件 . 为了演示,我们可以参考创建自定义项组件的this sample . 该示例也在documentation中进行了描述,它还将向您展示如何使用此组件的@Input指令绑定数据 .
让我指导您完成整个过程 .
1.)创建自定义组件
using-item-template.component.ts
using-item-template.component.html
最后也是至关重要的部分是不要忘记在NgModule中声明你的ItemComponent!
main.ts