首页 文章

在模板中绑定 DOM 元素

提问于
浏览
2

我有以下组件:

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 回答

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

    终于搞定了。谢谢您的帮助!

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

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

    您应该将选择器更改为'[test]'并使用 inject ElementRef来访问ElementRef.nativeElement

    <canvas test></canvas>
    

    构造函数:

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

相关问题