Angular 在模板中绑定DOM元素

我有以下组成部分：

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并不能使DOM与“renderer”变量保持同步。我能想到的唯一方法是读取DOM元素的文本内容并绑定它，但我想这不是最好的方法。我该怎么做

在Angular 1.XXX中，通常不需要动态模板，并且常常导致无法读取代码。在上述情况下，请使用以下内容替换模板：

模板：“

然后向类中添加构造函数以获取elementRef，并在实例化WebGLRenderer（）时使用canvas属性：

---

{{}

大括号用于插值，模板有效地转换为

renderer.domeElement.toString（）

您应该将选择器更改为

'[test]'

，并使用注入的

ElementRef

访问

ElementRef.nativeElement

：

<canvas test></canvas>

---

终于成功了。谢谢你的帮助

import {Component, ElementRef} from 'angular2/core';

@Component({
    selector: 'test',
    template: ''
})
export class TestComponent {

    el;

    constructor(public elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
        this.renderer = new THREE.WebGLRenderer();
        this.el.appendChild(this.renderer.domElement);     
    }
}

this.renderer = new THREE.WebGLRenderer({canvas: elementRef.nativeElement});

import {Component, ElementRef} from 'angular2/core';

@Component({
    selector: 'test',
    template: ''
})
export class TestComponent {

    el;

    constructor(public elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
        this.renderer = new THREE.WebGLRenderer();
        this.el.appendChild(this.renderer.domElement);     
    }
}