一.为什么要用ElementRef

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

为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer(已废弃,现在用Renderer2) 、抽象类 RootRenderer 等。此外还定义了以下引用类型:

1. ElementRef;

2.TemplateRef;

3.ViewRef ;

4.ComponentRef ;

5.ViewContainerRef ;

二.ElementRef有什么作用

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

三.如何使用ElementRef

先看需求:我们要实现一个组件成功加载另一个组件(本文中是遮罩的组件)并渲染完成后,改变遮罩文字层div的样式,接下来请看我是如何实现的;

1.引入相关api

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

2.构造函数依赖注入

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

3.使用属性装饰符@ViewChild

<div class="contents" [innerHTML]="content | translate" #divContent>
</div>
@ViewChild('divContent') greetDiv: ElementRef;

4.设置相关样式

ngAfterViewInit() {
this.renderer.setStyle(this.greetDiv.nativeElement, 'width', '3.60rem');
}

  

Angular ElementRef详解的更多相关文章

  1. angular模块详解

    原文: https://www.jianshu.com/p/819421ff955a 大纲 1.angular应用是模块化的 2.对模块(Module)的认识 3.模块的分类:根模块和特性模块 4.N ...

  2. angular路由详解:

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. AngularJs angular.identity和angular.noop详解

    angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看 ...

  4. angular路由详解六(路由守卫)

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  5. angular路由详解四(子路由)

    子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, childr ...

  6. angular路由详解一(基础知识)

    本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑.一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索.如今又开始填angular的坑了.闲话不扯了.(本人学 ...

  7. 简话Angular 04 Angular过滤器详解

    一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...

  8. angular指令详解--自定义指令

    自定义指令 directive()这个方法是用来定义指令的: angular.module('myApp', []) .directive('myDirective', function ($time ...

  9. angular.module 详解

    AngularJS 模块 模块包含了主要的应用代码. 一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码. 可以将module理解成一个容器,可以往其中放入controllers.serv ...

随机推荐

  1. oop面向对象【继承、super、this、抽象类】

    今日内容 1.三大特性——继承 2.方法重写 3.super关键字 4.this关键字 5.抽象类 教学目标 1.能够解释类名作为参数和返回值类型 2.能够写出类的继承格式 3.能够说出继承的特点 4 ...

  2. Linux 实验 [Day 01]

    目录 1. Linux 简介(略过) 2. Linux 基本概念及操作:命令.快捷键与通配符 2.1 基础命令 2.2 终端快捷键 2.3 通配符 2.4 帮助命令 3. 用户及文件权限管理 3.1 ...

  3. Linux - CentOS 7 通过Yum源安装 MySql 5.7

    添加MySQL Yum存储库 从官网下载最新的mysql源 官网地址:https://dev.mysql.com/downloads/repo/yum/ 选择并下载适用于平台的发行包. 然后,在Lin ...

  4. 推荐一种非常好的新版DSP库源码移植方式,含V7,V6和V5的IAR以及MDK5的AC5和AC6版本

    说明: 1.新版CMSIS V5.6里面的DSP库比以前的版本人性化了好多. 2.本帖为大家分享一种源码的添加方式,之前一直是用的库方便,不方便查看源码部分. 3.DSP教程可以还看第1版的,在我们的 ...

  5. weed3-2.1.开始纯java使用

    Weed3 一个微型ORM框架(只有0.1Mb哦) 源码:https://github.com/noear/weed3 源码:https://gitee.com/noear/weed3 纯java使用 ...

  6. 关于 Python_你一定没读过的8个技巧

    介绍 Python 功能和小技巧的文章网上有无数篇,比如变量解压缩,partial 偏函数,枚举可迭代对象... 但关于 Python 我们能说的还有很多.所以今天我将向大家展示一些我知道和有使用过的 ...

  7. JavaWeb入门——Tomcat的目录结构

    JavaWeb入门——Tomcat的目录结构 摘要:本文主要了解了Tomcat的目录结构. 目录结构 打开Tomcat的目录,可以看到如下文件和文件夹: bin目录 该目录下存放的是二进制可执行文件. ...

  8. C# net core程序调试错误集(持续更新)

    目录 C#程序调试错误集 1.依赖注入错误System.InvalidOperationException: Unable to resolve service for type 'xxx' whil ...

  9. 番茄助手 最新 Visual Assist X 适应于VS2019 VS2017 VS2015 VS2013 亲测可用

    番茄助手 最新 Visual Assist X 适应于VS2019 VS2017 VS2015 VS2013 亲测可用 如图: 颜色已经改变: 下载说明: /* INSTALLATION 0) Uni ...

  10. Android框架式编程之Retrofit

    一.Retrofit 简介 Retrofit 官网地址: https://github.com/square/retrofit Retrofit(即Retrofit,目前最新版本为2.6.0版本),是 ...