将 aframe-template-component 与 angular2 一起使用时的模板解析错误

Question

我正在尝试在 angular2 中使用框架模板组件示例。我已经将所有 aframe 库与 npm-template-component 一起打包并添加到 index.html 中。我的 app.html 文件包括

<script id="link" type="text/html">
            <a-entity class="link"
                      geometry="primitive: plane; height: 1; width: 1"
                      material="shader: flat; src: ${thumb}"
                      sound="on: click; src: #click-sound"
                      event-set__1="_event: mousedown; scale: 1 1 1"
                      event-set__2="_event: mouseup; scale:1.2 1.2 1"
                      event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
                      event-set__4="_event: mouseleave; scale:1 1 1"
                      set-image="on: click; target: #image-360; src: ${src}"
                      sound="on: click; src: #click-sound"></a-entity>
        </script>
    </a-assets>
    <!--360-degree image.-->
    <a-sky id="image-360" radius="10" src="#city"></a-sky>

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
    </a-entity>

没有模板、布局和事件集，一切正常。如果我添加这些，我会收到错误

    Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppComponent@70:18 ("

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity [ERROR ->]template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <a-entity t"): AppComponent@70:18
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-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        [ERROR ->]<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <"): AppComponent@70:8 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppCom…}message: (...)name: (...)stack: (...)_nativeError: Error: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppComponent@70:18 ("

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity [ERROR ->]template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <a-entity t"): AppComponent@70:18
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-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        [ERROR ->]<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <"): AppComponent@70:8
    at SyntaxError.BaseError [as constructor] (http://localhost:8080/dev.bundle.js:50332:27)
    at new SyntaxError (http://localhost:8080/dev.bundle.js:5444:16)
    at TemplateParser.parse (http://localhost:8080/dev.bundle.js:14749:19)
    at JitCompiler._compileTemplate (http://localhost:8080/dev.bundle.js:36545:68)
    at http://localhost:8080/dev.bundle.js:36428:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8080/dev.bundle.js:36428:19)
    at createResult (http://localhost:8080/dev.bundle.js:36311:19)
    at e.invoke (http://localhost:8080/polyfills.bundle.js:1250:15991)
    at n.run (http://localhost:8080/polyfills.bundle.js:1250:13378)__proto__: BaseError Error: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppComponent@70:18 ("

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity [ERROR ->]template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <a-entity t"): AppComponent@70:18
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-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        [ERROR ->]<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <"): AppComponent@70:8
    at SyntaxError.BaseError [as constructor] (http://localhost:8080/dev.bundle.js:50332:27)
    at new SyntaxError (http://localhost:8080/dev.bundle.js:5444:16)
    at TemplateParser.parse (http://localhost:8080/dev.bundle.js:14749:19)
    at JitCompiler._compileTemplate (http://localhost:8080/dev.bundle.js:36545:68)
    at http://localhost:8080/dev.bundle.js:36428:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8080/dev.bundle.js:36428:19)
    at createResult (http://localhost:8080/dev.bundle.js:36311:19)
    at e.invoke (http://localhost:8080/polyfills.bundle.js:1250:15991)
    at n.run (http://localhost:8080/polyfills.bundle.js:1250:13378)

我还在 app.module.ts 文件的架构下包含了 CUSTOM_ELEMENTS_SCHEMA。这个错误的原因是什么？我是否应该添加任何其他指令以在 angular2 中使用框架模板组件。请帮忙

Answer 1

这里有两个问题：

1. 看起来 Angular 正在尝试在 a-entity 上执行自己的“模板”指令。您必须使用唯一名称为“模板”组件起别名：

   AFRAME.components.atemplate = AFRAME.components.template;

2. Angular 会从其组件中去除 script 标记，但您仍然可以从外部 html 文件加载模板：

   <a-entity atemplate="src: url/to/your/template.html"></a-entity>

Answer 2

我猜 Angular 可能会劫持模板来做自己的事？

您也许可以尝试删除 type="text/html" 以摆脱 Angular。或者您可以随时从外部加载模板。

// In file ./mytemplate.html
<a-entity class="link"
                  geometry="primitive: plane; height: 1; width: 1"
                  material="shader: flat; src: ${thumb}"
                  sound="on: click; src: #click-sound"
                  event-set__1="_event: mousedown; scale: 1 1 1"
                  event-set__2="_event: mouseup; scale:1.2 1.2 1"
                  event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
                  event-set__4="_event: mouseleave; scale:1 1 1"
                  set-image="on: click; target: #image-360; src: ${src}"
                  sound="on: click; src: #click-sound"></a-entity>

那么。

<a-entity template="src: mytemplate.html"></a-entity>