Question

我需要将elmarquez / threejs-viewcube中的“ CubeView”添加到我的项目中。我创建了组件。组件代码提示：

import { Component, OnInit, Input, Output, EventEmitter  } from '@angular/core';
import { DOCUMENT } from '@angular/common';

declare let THREE: any;

@Component({
  selector: 'app-cube-view-web-gl',
  template: '<div id="viewcube"> </div>',
  styleUrls: ['./cube-view-web-gl.component.scss']
})

export class CubeViewWebGlComponent implements OnInit {

  private domElement: any;
  private renderer: any;
  private scene : any;

  ngOnInit() {
  } 

constructor() {
    this.domElement = document.getElementById('viewcube'); 
    console.log(myElement);
}
}

浏览器日志仅写为空。

我尝试修改代码：

1）

const myElement: HTMLElement | null = document.getElementById('viewcube');

2）

constructor(@Inject(DOCUMENT) private document: Document){
}

但是结果保持不变。

Answer 1

使用AfterViewInit代替类似的构造器

export class CubeViewWebGlComponent implements OnInit,AfterViewInit  {
      ngAfterViewInit() {
        //get your element here
      }
....

Answer 2

您可以在Oninit内使用，或者如果要在构造函数内使用，则应像这样使用set timeout

///for constructor
 Ele:any;
    constructor(){
    setTimeout(()=>{
   this.Ele=document.getElementById('test');
   console.log(this.Ele);
   },100)
   }
////for OnInit

    ngOnInit(){
       this.Ele=document.getElementById('test');
       console.log(this.Ele);
      }

打字稿子组件document.getElementById返回null

2 个答案: