Angular 在项目中学习@ViewChild和ElementRef的使用

Posted Kabukiyo Lin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular 在项目中学习@ViewChild和ElementRef的使用相关的知识,希望对你有一定的参考价值。


作为一个刚开始学习Angular的初学者,我在以Angular为开发框架的项目中见到了包含 @ViewChildElementRef 的代码。因为是边做边学,第一次见到是感觉有点疑惑陌生,又好奇。在伙伴的指导和自己查阅之下,对这二者有了大概的了解认识,并完成了项目中的开发需求。

@ViewChild

现在我对 @ViewChild 的了解便是,父组件中想要使用或者说操作子组件,譬如执行子组件的方法,或者说获取子组件的属性。

View就是看,Child就是孩子,看孩子,那必然是父亲看孩子

也就是说,@ViewChild 是 父组件 用来 “看” 子组件的。

@ViewChild 使用一

当ViewChild传入的是子组件ChildComponent,即在父组件中注入子组件,从而获取子组件的属性或方法

childComponent.ts

import { Component } from '@angular/core';

@Component({
	selector:'app-child',
	templateurl:'bababa',
	styleUrls:'bababab',
})
export class ChildComponent{
	childFunction(){
		console.log('this function is from childComponent');
	}
}

parentComponent.ts

import { Component } from '@angular/core';
import { ViewChild } from '@angular/core';
import { ChildComponent } from '..../子组件的目录';

@Component({
	selector:'app-parent',
	templateurl:'bababa',
	styleUrls:'bababab',
})
export class ParentComponent{
	@ViewChild(ChildComponent) child : ChildComponent;
	
	parentFunction(){
		console.log('this function is from parentComponent')
		this.child.childFunction();
	}
}

在父组件中,要注意别忘了准备工作,导入ViewChild和子组件

import { ViewChild } from '@angular/core';
import { ChildComponent } from '..../子组件的目录';

此时ViewChild传入的是子组件ChildComponent,以变量child保存

@ViewChild(ChildComponent) child : ChildComponent;

这样就可以大大方方的使用子组件里的方法了。

@ViewChild 使用二

当ViewChild传入的是字符串,子组件打了锚点,父组件通过锚点位置从而获得子组件的属性或方法

八九不离十,只不过使用子组件ChildComponent时要打锚点做标记,即:

<app-child #child>I am a childComponent</app-child>

另外,在父组件ParentComponent的ts里是这么写的:

export class ParentComponent{
	@ViewChild('child') child : any; //找child这个锚点
	
	parentFunction(){
		console.log('this function is from parentComponent')
		this.child.childFunction();
	}
}

小结

近期在项目中发现:对于@ViewChild的使用,更多的是使用打锚点这种方式。有可能是我接触相关项目不够多,总结的这个规律不一定很具有典型性。

当我在项目实践时,需要去找这些父子组件之间的关系,看到有锚点如:

<app-child #child>I am a childComponent</app-child>

那么我就知道,此父组件使用了 selector为 app-child 的子组件中的某种属性或方法。那么我再去搜索 app-child,再看回父组件的ts,对比查看,我就能知道父组件到底怎么操作子组件。

ElementRef

ElementRef也是在我了解@ViewChild时顺带了解的,因为在项目中发现他们二者会结合使用。

ElementRef在我现在的理解,我觉得它是用来操作DOM的,对DOM节点做一些操作,改字体啊,颜色啊,诸如此类的。

看看ElementRef的使用

import { Component, ElementRef, AfterViewInit } from '@angular/core';
export class AppComponent {
 	constructor(private elementRef: ElementRef) { } 
 	ngAfterViewInit() { 
		console.dir(this.elementRef.nativeElement.querySelector('div'));
		this.elementRef.nativeElement.querySelector('div').style.color='red';
 }
}

很简单

  1. 导入ElementRef,AfterViewInit
  2. 在constructor中注册 private elementRef:ElementRef
  3. 在ngAfterViewInit钩子中使用elementRef
  4. this.elementRef.nativeElement获取DOM

@ViewChild与ElementRef 结合操作子组件的DOM

@ViewChild是父组件去访问子组件,ElementRef可以用来操作DOM。那么二者结合使用,父组件就可以操作子组件的DOM。

省略准备工作,核心部分如:

<app-child #child></app-child> //子组件打锚点
@ViewChild('child',{ static:true }) eleRef : ElementRef;

//还是在ngAfterViewInit使用
ngAfterViewInit(){
	let ele = this.eleRef.nativeElement;
	ele.color = ’red’;
}

这样就父组件就可以通过锚点访问操作子组件的DOM了

以上是关于Angular 在项目中学习@ViewChild和ElementRef的使用的主要内容,如果未能解决你的问题,请参考以下文章

java中学习了swing可以做一个啥项目

VueJS中学习使用Vuex详解

VueJS中学习使用Vuex详解

从别人的代码中学习golang系列--03

Vue.js中学习使用Vuex详解

Angular: 属性装饰器ViewChild终章