typescript子組件document.getElementById返回null

Question

我需要將elmarquez / threejs-viewcube中的“CubeView”添加到我的項目中。 我創建了組件。 組件代碼abow：

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中使用，或者如果您想在構造函數中使用，則應該像這樣使用set time out

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