Angular4里ElementRef的使用方法

來源：懂視網責編：小采時間：2020-11-27 19:55:41

Angular4里ElementRef的使用方法

Angular4里ElementRef的使用方法:這次給大家帶來Angular4里ElementRef的使用方法，Angular4里ElementRef使用的注意事項有哪些，下面就是實戰案例，一起來看一下。Angular 的口號是 - "一套框架，多種平臺。同時適用手機與桌面 (One framework.Mobile &

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular4里ElementRef的使用方法:這次給大家帶來Angular4里ElementRef的使用方法，Angular4里ElementRef使用的注意事項有哪些，下面就是實戰案例，一起來看一下。Angular 的口號是 - "一套框架，多種平臺。同時適用手機與桌面 (One framework.Mobile &

這次給大家帶來Angular4里ElementRef的使用方法，Angular4里ElementRef使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

Angular 的口號是 - "一套框架，多種平臺。同時適用手機與桌面 (One framework.Mobile & desktop.)"，即 Angular 是支持開發跨平臺的應用，比如：Web 應用、移動 Web 應用、原生移動應用和原生桌面應用等。

為了能夠支持跨平臺，Angular 通過抽象層封裝了不同平臺的差異，統一了 API 接口。如定義了抽象類 Renderer 、抽象類 RootRenderer 等。此外還定義了以下引用類型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。下面我們就來分析一下 ElementRef 類：

ElementRef的作用

在應用層直接操作 DOM，就會造成應用層與渲染層之間強耦合，導致我們的應用無法運行在不同環境，如 web worker 中，因為在 web worker 環境中，是不能直接操作 DOM。有興趣的讀者，可以閱讀一下 Web Workers 中支持的類和方法這篇文章。通過 ElementRef 我們就可以封裝不同平臺下視圖層中的 native 元素 (在瀏覽器環境中，native 元素通常是指 DOM 元素)，最后借助于 Angular 提供的強大的依賴注入特性，我們就可以輕松地訪問到 native 元素。

ElementRef的定義

export class ElementRef {
 public nativeElement: any;
 constructor(nativeElement: any) { this.nativeElement = nativeElement; }
}

ElementRef的應用

我們先來介紹一下整體需求，我們想在頁面成功渲染后，獲取頁面中的 p 元素，并改變該 p 元素的背景顏色。接下來我們來一步步，實現這個需求。

首先我們要先獲取 p 元素，在文中 "ElementRef 的作用" 部分，我們已經提到可以利用 Angular 提供的強大的依賴注入特性，獲取封裝后的 native 元素。在瀏覽器中 native 元素就是 DOM 元素，我們只要先獲取 my-app元素，然后利用 querySelector API 就能獲取頁面中 p 元素。具體代碼如下：

import { Component, ElementRef } from '@angular/core'; @Component({
 selector: 'my-app',
 template: `
 <h1>Welcome to Angular World</h1>
 <p>Hello {{ name }}</p>
 `,
}) export class AppComponent {
 name: string = 'Semlinker'; constructor(private elementRef: ElementRef) { let pEle = this.elementRef.nativeElement.querySelector('p'); console.dir(pEle);
 }
}

運行上面代碼，在控制臺中沒有出現異常，但是輸出的結果卻是 null 。什么情況？沒有拋出異常，我們可以推斷 this.elementRef.nativeElement 這個對象是存在，但卻找不到它的子元素，那應該是在調用構造函數的時候，my-app 元素下的子元素還未創建。那怎么解決這個問題呢？沉思中… ，不是有 setTimeout 么，我們在稍微改造一下：

 constructor(private elementRef: ElementRef) {
 setTimeout(() => { // 此處需要使用箭頭函數哈，你懂的...
 let pEle = this.elementRef.nativeElement.querySelector('p');
 console.dir(pEle);
 }, 0); }

問題解決了，但感覺不是很優雅？有沒有更好的方案，答案是肯定的。Angular 不是有提供組件生命周期的鉤子，我們可以選擇一個合適的時機，然后獲取我們想要的 p 元素。

 import { Component, ElementRef, AfterViewInit } from '@angular/core'; @Component({
 selector: 'my-app',
 template: `
 <h1>Welcome to Angular World</h1>
 <p>Hello {{ name }}</p>
 `,
}) export class AppComponent {
 name: string = 'Semlinker'; // 在構造函數中 this.elementRef = elementRef 是可選的，編譯時會自動賦值 // function AppComponent(elementRef) { this.elementRef = elementRef; } constructor(private elementRef: ElementRef) { } 
 ngAfterViewInit() { // 模板中的元素已創建完成 console.dir(this.elementRef.nativeElement.querySelector('p')); // let greetp: HTMLElement = this.elementRef.nativeElement.querySelector('p'); // greetp.style.backgroundColor = 'red'; }
}

運行一下上面的代碼，我們看到了意料中的 p 元素。我們直接選用 ngAfterViewInit 這個鉤子，不要問我為什么，因為它看得最順眼咯。不過我們后面也會有專門的文章，詳細分析一下 Angular 組件的生命周期。成功取到 p 元素，就剩下的事情就好辦了，直接通過 style 對象設置元素的背景顏色。

功能雖然已經實現了，但還有優化的空間么？

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
@Component({
 selector: 'my-app',
 template: ` <h1>Welcome to Angular World</h1>
 <p #greet>Hello {{ name }}</p> `,
}) export class AppComponent { name: string = 'Semlinker';
 @ViewChild('greet')
 greetp: ElementRef;
 ngAfterViewInit() { this.greetp.nativeElement.style.backgroundColor = 'red';
 }
}

是不是感覺瞬間高大上了，不過先等等，上面的代碼是不是還有進一步的優化空間呢？我們看到設置 p 元素的背景，我們是默認應用的運行環境在是瀏覽器中。前面已經介紹了，我們要盡量減少應用層與渲染層之間強耦合關系，從而讓我們應用能夠靈活地運行在不同環境。最后我們來看一下，最終優化后的代碼：

import { Component, ElementRef, ViewChild, AfterViewInit, Renderer } from '@angular/core'; @Component({
 selector: 'my-app',
 template: `
 <h1>Welcome to Angular World</h1>
 <p #greet>Hello {{ name }}</p>
 `,
}) export class AppComponent {
 name: string = 'Semlinker'; @ViewChild('greet')
 greetp: ElementRef; constructor(private elementRef: ElementRef, private renderer: Renderer) { }
 ngAfterViewInit() { // this.greetp.nativeElement.style.backgroundColor = 'red'; this.renderer.setElementStyle(this.greetp.nativeElement, 'backgroundColor', 'red');
 }
}

1.Renderer API 還有哪些常用的方法？

export abstract class Renderer { // 創建元素 abstract createElement(parentElement: any, name: string, 
 debugInfo?: RenderDebugInfo): any; // 創建文本元素 abstract createText(parentElement: any, value: string, 
 debugInfo?: RenderDebugInfo): any; // 設置文本 abstract setText(renderNode: any, text: string): void; // 設置元素Property abstract setElementProperty(renderElement: any, propertyName: string, 
 propertyValue: any): void; // 設置元素Attribute abstract setElementAttribute(renderElement: any, attributeName: string, 
 attributeValue: string): void; // 設置元素的Class abstract setElementClass(renderElement: any, className: string,
 isAdd: boolean): void; // 設置元素的樣式 abstract setElementStyle(renderElement: any, styleName: string, 
 styleValue: string): void; 
}

需要注意的是在 Angular 4.x+ 版本，我們使用 Renderer2 替代 Renderer (Angular V2)。

2.Renderer2 API 還有哪些常用的方法？

export abstract class Renderer2 { abstract createElement(name: string, namespace?: string|null): any; abstract createComment(value: string): any; abstract createText(value: string): any; abstract setAttribute(el: any, name: string, value: string, namespace?: string|null): void; abstract removeAttribute(el: any, name: string, namespace?: string|null): void; abstract addClass(el: any, name: string): void; abstract removeClass(el: any, name: string): void; abstract setStyle(el: any, style: string, value: any, 
 flags?: RendererStyleFlags2): void; abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void; abstract setProperty(el: any, name: string, value: any): void; abstract setValue(node: any, value: string): void; abstract listen(
 target: 'window'|'document'|'body'|any, eventName: string,
 callback: (event: any) => boolean | void): () => void;
}

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！