angular4 @ViewChild ElementRef renderer2

angular 如何操作 DOM ? 这是一个问题, 熟练了 Jquery 就会想引入 Jquery 去操作, 但是这不是一个好办法.

先看看看 ElementRef 和 renderer2 是否满足你的需求:

选择组件内节点

// 选择, 括号中的'mydiv'对应 模板中的 #mydiv ,  mydiv: ElementRef 为本组件类的对象@ViewChild('mydiv') mydiv: ElementRef// 如果选择子组件直接写组件名,如:@ViewChild(MatMenuTrigger) userIcon: MatMenuTrigger;// 返回原生节点let el = this.mydiv.nativeElement // 要想有提示断言一下即可, 改成:let el:HTMLElement = 
    
     this.mydiv.nativeElement // 使用原生方法let ipt = el.querySelector('input')
    

@ViewChild @ContentChild @ViewChildren @ContentChildren 又是什么

@ViewChild 选择组件模板内的节点, 类型 ElementRef 或子组件

@ContentChild 选择当前组件引用的子组件 @ContentChild(组件名)

这两哥们看起来是一样的, 区别在于ViewChild选择Shadow DOM, ContentChild 选择 Light DOM,一般情况下用ViewChild就ok了, 有关ShadowDom参见

@ViewChildren 和 @ContentChildren 则为对应的复数 类型:QueryList<ElementRef>

renderer2

// 添加类this.renderer2.addClass(el, 'active')// 移除了类this.renderer2.removeClass(el, 'active')// 设置样式this.renderer2.setStyle(el, 'height', '10px')// 移除样式this.renderer2.removeStyle(el, 'height')// 设置属性this.renderer2.setAttribute(el, 'data-id', 'id')// 移除属性this.renderer2.removeAttribute(el, 'data-id')// 设置值this.renderer2.setValue(ipt, 'some str')// 监听事件this.renderer2.listen(el, 'click', (e)=>{console.log(e)}) //el|'window'|'document'|'body'// 其他类似createElement 创建元素createComment 动态创建组件createText 创建文本节点destroyNode 销毁节点appendChild 插入子节点insertBefore (parent: any, newChild: any, refChild: any): voidremoveChild(parent: any, oldChild: any): void 移除子元素selectRootElement(selectorOrNode: string|any): anyparentNode(node: any): anynextSibling(node: any): any

虽然大面积地操作dom没有 Jquery 方便, 比如要做一个编辑器, 但是常规的用途建议使用 renderer2 而不是 引入Jquery