angular - 在 Angular 2 中使用无类型的 A-Frame 组件

Question

有没有办法在没有类型的 Angular-CLI 上运行库？

就我而言，我正在尝试安装 k-frame使用 aframe-template-component 并通过 documentation ，我知道我必须创建一个 typings.d.ts 文件才能将其与 TypeScript 一起使用。根据this问题，我已经尝试了不同的选项，但我无法生成文件或将其直接导入到项目中。

我也尝试过运行和安装 dts-gen，但我收到以下错误:

Component attempted to register before AFRAME was available

这意味着我必须先注册 A-frame。由于我被困了一段时间，您是否知道如何解决以下问题？提前感谢您的回复!

Answer 1

目前这不是一件容易的事。

我已经用 AngularCli 试过了。我使用 ng new 创建了一个新项目我已按照以下步骤操作:

1. ng new kframetest

2. 安装 aframe和 aframe-template-component使用:

   npm install aframe aframe-template-component --save
   

3. 由于 (zone.js 和 A-frame) 捕获 attributeChangedCallback你需要在 zone.js 之前加载 A-frame。然后 (在 polyfills.ts 文件中) 我添加了:

   import 'aframe';
   import 'aframe-template-component';
   

   就在import 'zone.js/dist/zone';之前

4. 使用 kframe sample 创建一个简单的组件作为模板。

5. 为了 Angular 可以解析特殊的 html 标签，比如 <a-entity>你必须添加 CUSTOM_ELEMENTS_SCHEMA和 NO_ERRORS_SCHEMA至 NgModule使用 schemas属性:

   schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
   

6. 运行应用程序。

现在你可以在控制台看到，A-frame 正在运行:

Put the A-Frame script tag in the head of the HTML before the scene to ensure everything for A-Frame is properly registered before they are used from HTML.

aframe-master.js:75646 A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #bf8b8f9)
aframe-master.js:75647 three Version: ^0.83.0
aframe-master.js:75648 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b

但最大的问题是 Angular 试图解析 HTML 而他不理解 aframe 模板语法，你会得到这个错误:

Unhandled Promise rejection: Template parse errors: Parser Error: Unexpected token # at column 6 in [src: #boxesTemplate] in KFrameTestComponent

 </a-assets>
 <a-entity [ERROR ->]template="src: #boxesTemplate"
           data-box1color="red" data-box2color="green" data-box3color"): KFrameTestComponent@10:12

Property binding src not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the @NgModule.declarations.

 </a-assets>

我一直在搜索不使用 Angular 解析它的添加 html，但我没有找到 ...

我已经尝试将模板添加到索引 html 中，它似乎可以工作，但我知道这不是您想要的情况。

您可以从这里获取代码:https://gitlab.com/jros/angularcli-kframe