Android Nativescript自定义组件

我按照本指南创建了一个nativescript自定义组件，但它不适合我

我有一个文件夹pages，里面有一个名为main的文件夹。 main有几个文件

main.html

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

<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>

我还有main common.css，但这并不重要。然后，我在页面中有另一个名为hello的文件夹，其中只有一个文件

hello.html

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

<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.）创建自定义组件

使用项目模板.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;
 }  
} 

---

自定义组件仅在angular中使用vanilla NS，您需要将其作为angular共享的东西，不确定它叫什么，因为我不使用angular哪个更好使用vanilla NS还是angular？每个都有优点和缺点，我使用的是香草，因为当我开始使用NS时，我遇到了同样的问题和更多导致错误的事情，但如果您熟悉ng2，或者需要重用网站逻辑，则ng2会更好谢谢您提供的信息：）谢谢您，这非常好用，但我想知道如果我想将ItemComponent放在一个单独的文件中，该怎么办使用item template.component.ts？没关系，我发现：D回答并投票：）

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 { }