详解Angular如何正确的操作DOM

无奈接手了一个旧项目，上一个老哥在Angular项目中大量使用了JQuery来操作DOM，真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢？

获取元素

1、ElementRef --- A wrapper around a native element inside of a View.

在组件的constructor中注入ElementRef，可以获取到整个组件元素的包裹。

rush:js;"> @Component({ selector: 'app-test-page',templateUrl: './test-page.component.html',styleUrls: ['./test-page.component.scss'] }) export class TestPageComponent implements OnInit {

constructor(
private el: ElementRef
) { }

ngOnInit() {
}

getDomtest() {
console.dir(this.el);
}
｝

ElementRef中的nativeElement即是组件最外层的DOM元素。再通过原生的DOM定位方式，即可获取到指定的selector元素。

rush:js;"> getDomtest() { console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 获取指定的子元素 }

2、@viewChild() --- You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

@viewChild可以获取指定的元素， 指定的方式可以是本地变量或者组件类型；

rush:js;"> // HTML

test()">测试获取DOM

　　// Dialog组件

// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';

@Component({
selector: 'app-test-page',styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
　 // 通过本地变量获取元素 可通过read来指定获取的元素类型
@ViewChild('testdom',{ read: ViewContainerRef }) viewcontainer: ViewContainerRef;
@ViewChild('testdom') viewelement: ElementRef;

　 // 通过组件类型来获取
@ViewChild(DialogComponent) viewcontent: DialogComponent;

constructor(
private el: ElementRef
) { }

ngOnInit() {
}

getDomtest() {
// console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
console.dir(this.viewcontainer);
console.dir(this.viewelement);
console.dir(this.viewcontent);
}
}

备注：ElementRef或者 @viewChild 获取元素，一定要在ngAfterViewInit 周期之后再使用。

3、@viewChildren -- You can use ViewChildren to get the {@link QueryList} of elements or directives from theview DOM.

@viewChild会返回符合条件的第一个元素，如果需要获取多个符合条件的元素呢？ @viewChildren会返回所有符合条件的元素的list。 指定selector的方式与@viewChild一致。

rush:js;"> // 复制一个元素

test()">测试获取DOM

test()">测试获取DOM

// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';

@Component({
selector: 'app-test-page',styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

@ViewChild('testdom',{ read: ViewContainerRef }) viewcontainer: ViewContainerRef;
@ViewChild('testdom') viewelement: ElementRef;
@ViewChildren('testdom') viewelements: QueryList;
@ViewChild(DialogComponent) viewcontent: DialogComponent;
@ViewChildren(DialogComponent) viewcontents: QueryList;

constructor(
private el: ElementRef
) { }

ngOnInit() {
}

getDomtest() {
// console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
// console.dir(this.viewcontainer);
console.dir(this.viewelement);
console.dir(this.viewelements);
console.dir(this.viewcontent);
console.dir(this.viewcontents);
}