angular 如何操作 DOM ? 这是一个问题,熟练了 Jquery 就会想引入 Jquery 去操作,但是这不是一个好办法.
先看看看 ElementRef 和 renderer2 是否满足你的需求:
选择组件内节点
<!--视图 -->
<div #mydiv><input></div>
// 选择,括号中的'mydiv'对应 模板中的 #mydiv,mydiv: ElementRef 为本组件类的对象
@ViewChild('mydiv') mydiv: ElementRef
// 如果选择子组件直接写组件名,如:
@ViewChild(MatMenuTrigger) userIcon: MatMenuTrigger;
// 返回原生节点
let el = this.mydiv.nativeElement //
要想有提示断言一下即可,改成:
let el:HTMLElement = <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参见 https://developer.mozilla.org…
@ViewChildren 和 @ContentChildren 则为对应的复数 类型:QueryList
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): void removeChild(parent: any,oldChild: any): void 移除子元素 selectRootElement(selectorOrNode: string|any): any parentNode(node: any): any nextSibling(node: any): any