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

Question

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

> 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

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

我错过了什么？

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

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

Answer 1

找到原因了

nativescript-ngx-magic 命令创建一个nativescript 目录，这里有一个app 文件夹，这里有另一个app 文件夹。这个内部应用程序文件夹是主 src 文件夹中应用程序文件夹的符号 link。但是在外部应用程序文件夹中生成了第二个 app.module.ts 文件。这是导入 NativeScriptModule 的地方。当我创建自定义控件时：> ng g component custom 然后此组件自动注册到内部应用程序文件夹中的 app.module.ts（在符号 link 上共享）。但是它没有在 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 { }

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

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

NativeScript custom component not showing when using @wwwalkerrun/nativescript-ngx-magic

nativescript

angular2-nativescript