发布于 4年前
Angular 4选择组件模板DOM元素（DOM操作）的方式
Angular提供了多种方式让我们获取页面的元素。主要分为两种：
- 基于Decorator：@ViewChild，@ViewChildren，@ContentChild，@ContentChildren
- 使用ElementRef以及querySelector
Decorator：@ViewChild，@ViewChildren，@ContentChild，@ContentChildren
@ViewChild
获取页面匹配到第一个元素或者指令
页面
<input #myname>
使用
@Component({selector: 'myCmp', templateUrl: 'myCmp.html'})
class MyCmp implements AfterViewInit {
@ViewChild('myname') input;
ngAfterViewInit() {
// do something
}
}
匹配指令
import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';
@Directive({selector: 'child-directive'})
class ChildDirective {
}
@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
@ViewChild(ChildDirective) child: ChildDirective;
ngAfterViewInit() {
// do something
}
}
@ViewChildren
和@ViewChild类似，匹配多个页面元素或指令，返回一个QueryList。
@Directive({selector: 'child-directive'})
class ChildDirective {
}
@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
@ViewChildren(ChildDirective) viewChildren: QueryList<ChildDirective>;
ngAfterViewInit() {
// viewChildren is set
}
}
对于多个元素可以使用逗号隔开，注意不支持有空格，@ViewChildren("var1,var2,var3")
我们可以在ngOnInit里订阅@ViewChild或@ViewChildren里元素的更新：
@ViewChildren(SomeType) viewChildren;
ngOnInit() {
this.viewChildren.changes.subscribe(changes => console.log(changes));
this.contentChildren.changes.subscribe(changes => console.log(changes));
}
@ContentChild和@ContentChildren：它们类似于@ViewChild和@ViewChildren，只是它们针对的是<ng-content>。
ElementRef
处理使用@ViewChild，@ViewChildren，@ContentChild和@ContentChildren外，我们也可以在组件的构造器注入ElementRef，使用ElementRef内置nativeElement的querySelector获取DOM节点。
export class MyComponent implements AfterViewInit{
constructor(private elRef:ElementRef) {}
ngAfterViewInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
}
