使用@ wwwalkerrun / nativescript-ngx-magic

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

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

我错过了什么？

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

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

Answer 1

我找到了原因。

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

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