Angular 4选择组件模板DOM元素(DOM操作)的方式

时间:2023-05-12 17:47:17

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);
  }
}