angular如何操作dom:Renderer2

1.angular不推荐直接操作dom:

<div #helloDiv>hello</div>

@ViewChild('helloDiv') hlDiv: ElementRef;

ngAfterViewInit() {
    this.hlDiv.nativeElement.style.height = '100px';
}

2.angular推荐用Renderer2去操作Dom:为防止注入攻击

<div #helloDiv>hello</div>

import { ElementRef, Renderer2 } from '...core';

constructor(provate rd2: Renderer2) {}

@ViewChild('helloDiv') hlDiv: ElementRef;

ngAfterViewInit() {
    this.rd2.setStyle(hlDiv.nativeElement, 'height', '100px')
}

3.还可以通过querySelector获取某个dom节点，然后进行操作：

import { Renderer2, ElementRef } from '....core';

constructor(
    private rd2: Renderer2,
    private el: ElementRef
){}

afterViewInit() {
    const someDom = this.el.nativeElement.querySelector(...);
    this.rd2.setStyle(someDom, 'height', '100px');
}