Question

我有以下组件：

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并不能使用＃34;渲染器＆＃34;使DOM保持最新状态。变量。我能想到的唯一方法是读取DOM元素的文本内容并将其绑定，但我想这不是最好的方法。我该怎么办？

Answer 1

在Angular中，通常不需要具有动态模板的1.XXX，并且通常会产生不可读的代码。在您的情况下，将模板替换为：

template: "<canvas class='threeEl'></canvas>"

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

export class TestComponent implements OnInit {
    el; 
    renderer;    
    constructor: [ng.core.ElementRef, function(elementRef) {
      el = elementRef.nativeElement;
    }]

    ngOnInit() {
        this.renderer = new THREE.WebGLRenderer({canvas: this.el});
        this.renderer.setSize(300, 300);
        //document.body.appendChild(this.renderer.domElement);
    }
}

Answer 2

{{}}花括号用于插值，您的模板有效地转换为renderer.domElement.toString()。

您应该将选择器更改为'[test]'并使用注入的ElementRef访问ElementRef.nativeElement：

<canvas test></canvas>

构造

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

Answer 3

终于搞定了。谢谢你的帮助！

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);     
    }
}

在模板中绑定DOM元素

3 个答案: