我有以下组件:
import {Component, OnInit} from 'angular2/core';
@Component({
selector: 'test',
template: `{{renderer.domElement}}`
})
export class TestComponent implements OnInit {
renderer;
ngOnInit() {
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(300, 300);
//document.body.appendChild(this.renderer.domElement);
}
}
{{}}属性绑定不会将 DOM 元素绑定到模板。使用 appendChild 不会使用“renderer”变量生成 DOM up-to-date。我能想到的唯一方法是读取 DOM 元素的文本内容并绑定它,但我想这不是最好的方法。我该怎么办?
3 回答
在 Angular 1.XXX 中,通常不需要动态模板,并且通常会产生不可读的代码。在您的情况下,将模板替换为:
template: "<canvas class='threeEl'></canvas>"
然后在类中添加一个构造函数来获取 elementRef,并在实例化 WebGLRenderer()时使用 canvas 属性:
终于搞定了。谢谢您的帮助!
{{}}
花括号用于插值,您的模板有效地转换为renderer.domElement.toString()
。您应该将选择器更改为
'[test]'
并使用 injectElementRef
来访问ElementRef.nativeElement
:构造函数: