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');
}