对于目前的三大框架而言,都是不建议直接对dom进行操作的,但是实际业务有时候难免需要,因为需要操作dom的时候并不多,所以东西容易忘,还是记录一下为好,在angular中官方提供了操作dom的类,这一点是很不错的,当然也可以自己用原生的方法去操作,但是官网中明确是不建议这么操作的,那么可以理解为官方的类为我们处理了一些直接操作dom带来的可能性能方面上的问题吧
主要的一步是在构造器里注入ElementRef
和Renderer2
这个两个类,在指令中或者管道中,
注入ElementRef
拿到就是指令或者管道的宿主元素了,管道的宿主其实就是所在的当前组件了。Renderer2
用来对宿主元素进行一些操作,比如setStyle
,setProperty
,addClass
等常见的dom操作。
简单示例如下
@Directive({
selector: '[justEight]'
})
export class JustEightDirective {
constructor(
private rd: Renderer2,
private el: ElementRef
) {
this.input = this.el.nativeElement;
}
input: any;
ngOnInit() {
this.rd.setStyle(this.input, 'outline', 'none');
}
@HostListener('keyup')
keyup() {
const value = this.input.value as string;
if (value.length > 8) {
this.rd.setStyle(this.input, 'border', '1px solid red');
} else {
this.rd.setStyle(this.input, 'border', '1px solid #ccc');
}
}
}
<input type="text" justEight>
效果: