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