使用AFRAME模板组件与angular2模板解析错误

Question

我想在angular2中使用aframe模板组件示例。我已经将所有的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中使用aframe模板组件。请帮忙

Answer 1

我猜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> 

Answer 2

有2个问题在这里：

1. 貌似角正试图以a-entity执行自己的 “模板” 指令。你有别名具有唯一名称的“模板”部分：从它的组成部分script标签

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

2. 角条，但你仍然可以从外部HTML文件中加载模板：

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