Angular ElementRef简介及其使用


Posted in Javascript onOctober 01, 2018

Angular 的口号是 - “一套框架,多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)”,即 Angular 是支持开发跨平台的应用,比如:Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。

为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。

下面我们就来分析一下 ElementRef 类:

ElementRef 的作用

在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 web worker 中,因为在 web worker 环境中,是不能直接操作 DOM。有兴趣的读者,可以阅读一下 [Web Workers 中支持的类和方法][1] 这篇文章。通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular 提供的强大的依赖注入特性,我们就可以轻松地访问到 native 元素。

ElementRef 的定义

// angular-master/packages/core/src/linker/element_ref.ts
export class ElementRef<T = any> {
 public nativeElement: T;
 constructor(nativeElement: T) { this.nativeElement = nativeElement; }
}

ElementRef 的应用

我们先来介绍一下整体需求,我们想在页面成功渲染后,获取页面中的 div 元素,并改变该 div 元素的背景颜色。接下来我们来一步步,实现这个需求。

首先我们要先获取 div 元素,在文中 “ElementRef 的作用” 部分,我们已经提到可以利用 Angular 提供的强大的依赖注入特性,获取封装后的 native 元素。在浏览器中 native 元素就是 DOM 元素,我们只要先获取 my-app元素,然后利用 querySelector API 就能获取页面中 div 元素。具体代码如下:

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

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <div>Hello {{ name }}</div>
 `,
})
export class AppComponent {
 name: string = 'Semlinker';

 constructor(private elementRef: ElementRef) {
  let divEle = this.elementRef.nativeElement.querySelector('div');
  console.dir(divEle);
 }
}

运行上面代码,在控制台中没有出现异常,但是输出的结果却是 null 。什么情况 ? 没有抛出异常,我们可以推断 this.elementRef.nativeElement 这个对象是存在,但却找不到它的子元素,那应该是在调用构造函数的时候,my-app 元素下的子元素还未创建。

那怎么解决这个问题呢 ?沉思中… ,不是有 setTimeout 么,我们在稍微改造一下:

constructor(private elementRef: ElementRef) {
 setTimeout(() => { // 此处需要使用箭头函数哈,你懂的...
   let divEle = this.elementRef.nativeElement.querySelector('div');
   console.dir(divEle);
  }, 0);
}

更新一下代码,此时控制台成功输出了 div 。为什么添加个 setTimeout 就能成功获取到想要的 div 元素呢?此处就不展开了,有兴趣的读者可以参考 - [What the heck is the event loop anyway?][2] 这个演讲的示例。

问题解决了,但感觉不是很优雅 ?有没有更好的方案,答案是肯定的。Angular 不是有提供组件生命周期的钩子,我们可以选择一个合适的时机,然后获取我们想要的 div 元素。

import { Component, ElementRef, AfterViewInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <div>Hello {{ name }}</div>
 `,
})
export class AppComponent {

 name: string = 'Semlinker';

 // 在构造函数中 this.elementRef = elementRef 是可选的,编译时会自动赋值
 // function AppComponent(elementRef) { this.elementRef = elementRef; }
 constructor(private elementRef: ElementRef) { } 

 ngAfterViewInit() { // 模板中的元素已创建完成
  console.dir(this.elementRef.nativeElement.querySelector('div'));
  // let greetDiv: HTMLElement = this.elementRef.nativeElement.querySelector('div'); 
  // greetDiv.style.backgroundColor = 'red';
 }
}

运行一下上面的代码,我们看到了意料中的 div 元素。我们直接选用 ngAfterViewInit 这个钩子,不要问我为什么,因为它看得最顺眼咯。不过我们后面也会有专门的文章,详细分析一下 Angular 组件的生命周期。成功取到 div 元素,就剩下的事情就好办了,直接通过 style 对象设置元素的背景颜色。

功能虽然已经实现了,但还有优化的空间么?当然有咯!其实在 Angular 框架内部已经为我们提供了解决方案,它为我们提供了内置的装饰器,如 @ContentChild、 @ContentChildren、@ViewChild、@ViewChildren 等。

具体使用示例如下:

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <div #greet>Hello {{ name }}</div>
 `,
})
export class AppComponent {
 name: string = 'Semlinker';

 @ViewChild('greet')
 greetDiv: ElementRef;

 ngAfterViewInit() {
  this.greetDiv.nativeElement.style.backgroundColor = 'red';
 }
}

是不是感觉瞬间高大上了,不过先等等,上面的代码是不是还有进一步的优化空间呢 ?我们看到设置 div 元素的背景,我们是默认应用的运行环境在是浏览器中。前面已经介绍了,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

最后我们来看一下,最终优化后的代码:

import { Component, ElementRef, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <div #greet>Hello {{ name }}</div>
 `,
})
export class AppComponent {
 name: string = 'Semlinker';

 @ViewChild('greet')
 greetDiv: ElementRef;

 constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

 ngAfterViewInit() {
  // this.greetDiv.nativeElement.style.backgroundColor = 'red';
  this.renderer.setStyle(this.greetDiv.nativeElement, 'backgroundColor', 'red');
 }
}

最后我们通过 Renderer2 实例提供的 API 优雅地设置了 div 元素的背景颜色。

我有话说

Renderer2 API 还有哪些常用的方法 ?

export abstract class Renderer2 {
 abstract createElement(name: string, namespace?: string|null): any;
 abstract createComment(value: string): any;
 abstract createText(value: string): any;
 abstract setAttribute(el: any, name: string, value: string,
  namespace?: string|null): void;
 abstract removeAttribute(el: any, name: string, namespace?: string|null): void;
 abstract addClass(el: any, name: string): void;
 abstract removeClass(el: any, name: string): void;
 abstract setStyle(el: any, style: string, value: any, 
  flags?: RendererStyleFlags2): void;
 abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
 abstract setProperty(el: any, name: string, value: any): void;
 abstract setValue(node: any, value: string): void;
 abstract listen(
   target: 'window'|'document'|'body'|any, eventName: string,
   callback: (event: any) => boolean | void): () => void;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 #Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 #Javascript
vue项目持久化存储数据的实现代码
Oct 01 #Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 #Javascript
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
You might like
模拟xcopy的函数
2006/10/09 PHP
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
javascript 秒表计时器实现代码
2017/03/09 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
python实现合并两个数组的方法
2015/05/16 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
精彩的广告词
2014/03/19 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
第二课堂活动总结
2014/05/07 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
暂停营业通知
2015/04/25 职场文书
工作简历的自我评价
2019/05/16 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
PHP策略模式写法
2021/04/01 PHP
css3实现的加载动画效果
2021/04/07 HTML / CSS
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
Python天气语音播报小助手
2021/09/25 Python