使用 @wwwalkerrun/nativescript-ngx-magic 时未显示 NativeScript 自定义组件答案

【问题标题】：NativeScript custom component not showing when using @wwwalkerrun/nativescript-ngx-magic使用 @wwwalkerrun/nativescript-ngx-magic 时未显示 NativeScript 自定义组件
【发布时间】：2017-03-27 15:35:34
【问题描述】：

我创建了一个新的测试应用

> ng new TestApp

然后我安装 nativescript-ngx-magic

> npm i @wwwalkerrun/nativescript-ngx-magic --save

然后新建一个app.component.tns.html

<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
    <Label text="NativeScript is Neat." class="h1 text-center"></Label>
</StackLayout>

创建一个空白的 app.component.tns.css

然后更改我的 app.component.ts 以便它可以与 nativescript-ngx-magic 一起使用：

import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

现在运行应用程序

> npm run start.android

该应用程序有效

然后我创建一个自定义控件：

> ng g component custom

然后再次创建一个空白的 custom.component.tns.css 创建一个新的 custom.component.tns.html

<Label text="My Custom Component" class="h1 text-center"></Label>

更改 custom.component.ts 代码：

import { Component } from  '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  moduleId: module.id,
  selector: 'app-custom',
  templateUrl: 'custom.component.html',
  styleUrls: ['custom.component.css']
})
export class CustomComponent {
}

并将这个自定义标签添加到我的 app.component.tns.html 中，现在它看起来像这样：

<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
    <Label text="NativeScript is Neat." class="h1 text-center"></Label>
    <app-custom></app-custom>
</StackLayout>

然后当我再次运行应用程序时：

> npm run start.android

我希望看到我的自定义组件，但应用看起来还是一样。

我错过了什么？

如果我将自定义组件添加到 .html 文件而不是 tns.html 并使用 ng serve 运行，那么网站会正确显示自定义组件。只是不是应用程序。

在使用 nativescript-ngx-magic 时这是否可能？

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

我找到了原因。

nativescript-ngx-magic 命令创建一个 nativescript 目录，这里有一个 app 文件夹，这里有另一个 app 文件夹。这个内部 app 文件夹是指向主 src 文件夹中 app 文件夹的符号链接。但是在外部 app 文件夹中会生成第二个 app.module.ts 文件。这是导入 NativeScriptModule 的地方。当我创建自定义控件时：> ng g component custom 然后该组件自动注册到 app.module.ts 内部应用程序文件夹中（在符号链接上共享）。但它没有在用于 nativescript 的 app.module.ts 中注册。这解释了为什么自定义组件对网站可见但对应用程序不可见。我需要在声明部分的第二个 app.module.ts 中注册自定义组件，所以这个 app.module.ts 现在看起来像：

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { AppComponent } from './app/app.component';
import { CustomComponent } from "./app/custom/custom.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule
    ],
    declarations: [
        AppComponent, CustomComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

完成此操作后，自定义组件也会显示在应用程序中。

【讨论】：