TypeScript子组件document.getElementById返回null
TypeScript子组件document.getElementById返回null
提问于 2019-06-19 19:18:07
我需要将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){
}但是结果是一样的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-19 19:22:12
使用AfterViewInit代替类似这样的构造函数
export class CubeViewWebGlComponent implements OnInit,AfterViewInit {
ngAfterViewInit() {
//get your element here
}
....Stack Overflow用户
发布于 2019-06-19 21:05:34
你可以在一个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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56666455
复制相关文章
相似问题
腾讯云开发者
