安装

npm i nativescript-ng2-magic --save

使用方法

使用 Component 从 nativescript-ng2-magic 而不是 @angular/core。为什么？
为每个组件创建以 .tns.html 结尾的 NativeScript 视图（以及/或以 .tns.css 结尾的样式）。如何？
使用 NativeScript 运行真正的原生移动应用程序！

示例

一个示例根组件，app.component.ts

import {Component} from 'nativescript-ng2-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

首次运行！

您需要完全完成上述步骤 1 和 2。

使用以下命令在 iOS 模拟器中运行您的应用程序

npm run start.ios

使用以下命令在 Android 模拟器中运行您的应用程序

npm run start.android

欢迎来到 NativeScript 的神奇世界！

如何创建 NativeScript 视图

根据我们上面的示例，假设 app.component.html 看起来像这样

<main>
  <div>This is my root component</div>
</main>

然后您可以在 app.component.tns.html 中创建一个新文件，如下所示

<StackLayout>
  <Label text="This is my root component"></Label>
</StackLayout>

您还可以根据需要使用特定平台的视图，方法是在 platformSpecific 组件元数据中使用

import {Component} from 'nativescript-ng2-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  platformSpecific: true
})
export class AppComponent {}

然后您可以为 iOS 和 Android 创建单独的视图

app.component.ios.html
app.component.android.html

您可以在这里了解更多有关 NativeScript 视图选项的信息。

您还可以在此VS Code或Atom 编辑器中安装有用的视图代码片段。

您可以在这里了解更多有关此配置如何工作以及为什么的详细信息。

支持的项目

为什么不同的 Component？

从 nativescript-ng2-magic 中的 Component 与从 @angular/core 中的 Component 完全相同，但它会在您的应用程序在 NativeScript 移动应用程序中运行时自动使用 NativeScript 视图。

该库在内部提供了一个自定义的 Decorator。您可以在此查看，并且它使用这里的实用工具。

您可以通过angular2-seed-advanced了解此魔法的更多详细用法。

关于 AoT 的特别说明

目前，您不能使用自定义组件装饰器与 AoT 编译一起使用。这可能在未来改变，但到目前为止，您可以使用此模式在需要为网页创建 AoT 构建时使用。

import { Component } from '@angular/core';

// just comment this out and use Component from 'angular/core'
// import { Component } from 'nativescript-ng2-magic';

@Component({
  // etc.

执行上述操作后，运行 AoT 构建将成功。 :)

从 nativescript-ng2-magic 的 Component 将自动执行 templateUrl 切换，以在 {N} 应用程序中运行时使用 {N} 视图，因此您在创建网页的 AoT 构建时不需要它。但是请注意，当您回到运行您的 {N} 应用程序时，应该重新注释 Component 从 nativescript-ng2-magic。这种临时不便可能在未来不再需要。

要求

安装 NativeScript

许可证

MIT