angular4 如何在指令里面获取组件视图

Question

如第二张图无法获取，我的navbar组件里面有navBarDiv，请问怎样获取并操作它，document方法可以，但是这样就失去用angular的意义了

Answer 1

在指令的构造函数里面注入ElementRef，便可操作引用指令的元素

Answer 2

<div #dom>dom</div>

import { ...,ViewChild,ElementRef,AfterViewInit } from '@angular/core'
...
export class XXXComponent implements AfterViewInit{
    @ViewChild('dom') dom:ElementRef
    ...
    
    ngAfterViewInit(){
        ...
        console.log(this.dom.nativeElement)   //获取div dom元素
    }
}   

可以配合Renderer2进行一些更好的dom操作。

Answer 3

获取元素使用ElementRef,
操作元素属性样式等，使用Renderer2，最近又出了个Renderer3。