将 NativeScript 应用神奇地集成到您现有的 Angular2 网页应用中并重用所有代码。

您将添加 NativeScript 视图，但您已经知道了这一点。

• 仅适用于由 angular-cli 生成的项目
• 在很大程度上受到由 Nathan Walker 创建的原始模块 nativescript-ng2-magic 的启发

安装

npm i nativescript-ng2-cli-magic --save

用法

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

示例

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

import {Component} from 'nativescript-ng2-cli-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-cli-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？

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

该库在底层提供了一个自定义 Decorator。您可以在此查看，并使用此处的实用工具。

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

关于 AoT 的特别说明

目前，您无法使用自定义组件装饰器进行 AoT 编译。这可能在未来发生变化，但到目前为止，您可以使用此模式来创建 Web 的 AoT 构建。

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

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

@Component({
  // etc.

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

nativescript-ng2-cli-magic 的 Component 将自动进行 templateUrl 切换，以在运行在 {N} 应用中时使用 {N} 视图，因此您在创建 Web 的 AoT 构建时不需要它。但是请注意，当您返回运行 {N} 应用时，您应该注释回 Component 从 nativescript-ng2-cli-magic。这种暂时的不便可能在将来不再需要。

要求

• 安装NativeScript

许可证

MIT