Angular ElementRef详解
一.为什么要用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详解的更多相关文章
- angular模块详解
原文: https://www.jianshu.com/p/819421ff955a 大纲 1.angular应用是模块化的 2.对模块(Module)的认识 3.模块的分类:根模块和特性模块 4.N ...
- angular路由详解:
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- AngularJs angular.identity和angular.noop详解
angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看 ...
- angular路由详解六(路由守卫)
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- angular路由详解四(子路由)
子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, childr ...
- angular路由详解一(基础知识)
本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑.一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索.如今又开始填angular的坑了.闲话不扯了.(本人学 ...
- 简话Angular 04 Angular过滤器详解
一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...
- angular指令详解--自定义指令
自定义指令 directive()这个方法是用来定义指令的: angular.module('myApp', []) .directive('myDirective', function ($time ...
- angular.module 详解
AngularJS 模块 模块包含了主要的应用代码. 一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码. 可以将module理解成一个容器,可以往其中放入controllers.serv ...
随机推荐
- 【CV现状-1】磨染的初心——计算机视觉的现状:缘起
#磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...
- python多线程编程—同步原语入门(锁Lock、信号量(Bounded)Semaphore)
摘录python核心编程 一般的,多线程代码中,总有一些特定的函数或者代码块不希望(或不应该)被多个线程同时执行(比如两个线程运行的顺序发生变化,就可能造成代码的执行轨迹或者行为不相同,或者产生不一致 ...
- AI: Web: 1 Vulnhub Walkthrough
下载链接: https://www.vulnhub.com/entry/ai-web-1,353/ 主机发现扫描: 主机端口扫描 http://10.10.202.158/ 目录扫描: ╰─ sudo ...
- Shell—定时任务(crontab)
如何让shell脚本每天定时执行? 1.新建需要定时执行的shell脚本,这里为date.sh脚本. #!/bin/bash PATH=/bin:/sbin:/usr/bin:/usr/sbin:/u ...
- 精通awk系列(14):细说awk中的变量和变量赋值
回到: Linux系列文章 Shell系列文章 Awk系列文章 awk变量 awk的变量是动态变量,在使用时声明. 所以awk变量有3种状态: 未声明状态:称为untyped类型 引用过但未赋值状态: ...
- python-基础-isinstance(p_object, class_or_type_or_tuple)
1.isinstance(p_object, class_or_type_or_tuple) p_object:实例 class_or_type_or_tuple:类型,可以是一个类型或者是组成的元组 ...
- 每个Web开发者都该了解的12条命令行
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://tutorialzine.com/2017/08/12-terminal-comma ...
- springboot向elk写日志
springboot里连接elk里的logstash,然后写指定index索引的日志,而之后使用kibana去查询和分析日志,使用elasticsearch去保存日志. 添加引用 implementa ...
- JavaScript for 、for...of 、for...in 等 iteration 效率测试
由于不同浏览器,不同版本性能不一,且控制台本质是是套用了一大堆eval,沙盒化程度高,所以需使用node环境测试来提高准确性 // 准备待测数组 const NUM = 1e7; let arr = ...
- C lang:character input and output (I/O)
Xx_Introduction Character input and output is by more line character conpose of the text flow Defin ...