Question

我正在尝试在angular2中使用aframe-template-component示例。我有web包装所有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正试图在a-entity上执行自己的“模板”指令。您必须使用唯一名称为“模板”组件添加别名：

AFRAME.components.atemplate = AFRAME.components.template;
Angular strip script标签来自其组件，但您仍然可以从外部html文件加载模板：

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

Answer 2

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

您可以尝试删除ngAfterContentInit() { this.d1.ngAfterContentInit(); this.d2.ngAfterContentInit(); }以取消Angular。或者您可以随时在外部加载模板。

composer require zendframework/zend-db

然后

type="text/html"

使用带有angular2的aframe-template-component时模板解析错误

2 个答案: