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