Angular4 ElementRef的应用


Posted in Javascript onFebruary 26, 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 中支持的类和方法 这篇文章。通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular 提供的强大的依赖注入特性,我们就可以轻松地访问到 native 元素。

ElementRef的定义

export class ElementRef {
 public nativeElement: any;
 constructor(nativeElement: any) { 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); }

问题解决了,但感觉不是很优雅 ?有没有更好的方案,答案是肯定的。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 对象设置元素的背景颜色。

功能虽然已经实现了,但还有优化的空间么?

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, Renderer } 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: Renderer) { }

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

1.Renderer API 还有哪些常用的方法 ?

export abstract class Renderer { // 创建元素 abstract createElement(parentElement: any, name: string, 
   debugInfo?: RenderDebugInfo): any; // 创建文本元素 abstract createText(parentElement: any, value: string, 
   debugInfo?: RenderDebugInfo): any; // 设置文本 abstract setText(renderNode: any, text: string): void; // 设置元素Property abstract setElementProperty(renderElement: any, propertyName: string, 
   propertyValue: any): void; // 设置元素Attribute abstract setElementAttribute(renderElement: any, attributeName: string, 
   attributeValue: string): void; // 设置元素的Class abstract setElementClass(renderElement: any, className: string,
   isAdd: boolean): void; // 设置元素的样式 abstract setElementStyle(renderElement: any, styleName: string, 
   styleValue: string): void;  
}

需要注意的是在 Angular 4.x+ 版本,我们使用 Renderer2 替代 Renderer (Angular V2)。

2.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 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jquery 插件开发备注
Aug 27 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue cli构建的项目中请求代理与项目打包问题
Feb 26 #Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 #Javascript
vue bus全局事件中心简单Demo详解
Feb 26 #Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 #Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 #Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 #Javascript
使用vue-cli编写vue插件的方法
Feb 26 #Javascript
You might like
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
jQuery的三种$()
2009/12/30 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
详解Node 定时器
2018/02/26 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
django定期执行任务(实例讲解)
2017/11/03 Python
python实现教务管理系统
2018/03/12 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
平安建设实施方案
2014/03/19 职场文书
投标承诺函范文
2015/01/21 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Python基本数据类型之字符串str
2021/07/21 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL