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

版权声明:著作权归作者所有。

相关推荐

Angular4 监听路由URL的变化

Angular 4检测路由变化,可以使用router.events来监听:支持的事件类型:NavigationStart:导航开始NavigationEnd:导航结束NavigationCancel:取消导航NavigationError:导航出错RoutesRecoginzed:路由已认证在判断事件类型需要导入对应的事件类型,如:import { Router,&n

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

Kotlin:数组的基本操作

Kotlin使用Array类来表示数组,构造函数为:<init> Array(size: Int, init: (Int) -> T) size:数组大小init:初始化数组创建数组Kotlin提供了几种方法方便我们创建数组,包括:构造函数,标准库提供的arrayOf, arrayOfNulls 和emptyArray等 。构造函数// 创建 一个值

Angular 4:集成Angular Material2

Angular Material目的是按照Material Design的规范,使用Angular和TypeScript构建一个高质量的UI组件集。Angular 4已有的项目可以按照下面的步骤集成使用Angular Material2。安装Angular Material以及Angular CDKnpm install&nbs