angular操作Dom - 爱码网

1.通过原生JS操作

在ts文件中，在ngAfterViewInit()生命周期函数中（此时已经生成了DOM节点），通过原生js的方式可以获取该节点。

const div1: any = document.getElementById(\'box\'); // any必须。否则报错

2、通过viewChild来获取节点

html:定义一个#xxxx

<div #getChild>
  我是viewChild的数据
</div>

ts:引入viewChild,通过viewChild定义设置的#xxxx。此时对应的节点可以通过this.getChild.naticeElement来获取

import { Component, OnInit, ViewChild } from \'@angular/core\';

@Component({
  selector: \'app-dom\',
  templateUrl: \'./dom.component.html\',
  styleUrls: [\'./dom.component.less\']
})
export class DomComponent implements OnInit {
  @ViewChild(\'getChild\') getChild: any;
  constructor() { }
  public debug: any = true;
  ngOnInit(): void {
  }
   ngAfterViewInit(): void { // 视图加载完成后触发的方法 dom加载完成
 
     console.log(this.getChild.nativeElement.innerHTML);
   }

}