Question

typescript 子组件 document.getElementById 返回 null

2019-06-19

4833

angular typescript

我需要将 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);
}
}

浏览器日志仅写入 null。

我尝试修改代码：

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 内部使用，或者如果您想在构造函数内部使用，您应该像这样设置超时

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