How to use ElementRef application in Angular4

This article mainly introduces the application of Angular4 ElementRef. Now I will share it with you and give you a reference.

Angular's slogan is - "One framework, multiple platforms. Suitable for both mobile phones and desktops (One framework.Mobile & desktop.)", that is, Angular supports the development of cross-platform applications, such as: Web applications , mobile web applications, native mobile applications and native desktop applications, etc.

In order to support cross-platform, Angular encapsulates the differences of different platforms through an abstraction layer and unifies the API interface. For example, abstract class Renderer, abstract class RootRenderer, etc. are defined. In addition, the following reference types are defined: ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef, etc. Let's analyze the ElementRef class:

The role of ElementRef

Directly operating the DOM in the application layer will cause a gap between the application layer and the rendering layer Strong coupling prevents our applications from running in different environments, such as web workers, because in the web worker environment, the DOM cannot be directly manipulated. Interested readers can read the classes and methods supported in Web Workers. Through ElementRef, we can encapsulate native elements in the view layer under different platforms (in a browser environment, native elements usually refer to DOM elements). Finally, with the help of the powerful dependency injection feature provided by Angular, we can easily access native elements.

Definition of ElementRef

##

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

Application of ElementRef

Let’s first introduce the overall requirements , we want to get the p element in the page and change the background color of the p element after the page is successfully rendered. Next, we will implement this requirement step by step.

First we need to get the p element. In the "Role of ElementRef" section of the article, we have mentioned that we can use the powerful dependency injection feature provided by Angular to get the encapsulated native element. In the browser, the native element is the DOM element. We only need to get the my-app element first, and then use the querySelector API to get the p element in the page. The specific code is as follows:

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 = &#39;Semlinker&#39;; constructor(private elementRef: ElementRef) { let pEle = this.elementRef.nativeElement.querySelector(&#39;p&#39;); console.dir(pEle);
 }
}

When running the above code, no exception occurs in the console, but the output result is null . what's the situation ? No exception is thrown. We can infer that the object this.elementRef.nativeElement exists, but its child elements cannot be found. That should be because the child elements under the my-app element have not yet been created when the constructor is called. So how to solve this problem? Thinking..., isn't there setTimeout? Let's make a slight modification:

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

The problem is solved, but it doesn't feel very elegant? Is there a better solution? The answer is yes. Angular does not provide hooks for the component life cycle. We can choose a suitable time and get the p element we want.

 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 = &#39;Semlinker&#39;; // 在构造函数中 this.elementRef = elementRef 是可选的，编译时会自动赋值 // function AppComponent(elementRef) { this.elementRef = elementRef; } constructor(private elementRef: ElementRef) { } 
 ngAfterViewInit() { // 模板中的元素已创建完成 console.dir(this.elementRef.nativeElement.querySelector(&#39;p&#39;)); // let greetp: HTMLElement = this.elementRef.nativeElement.querySelector(&#39;p&#39;); // greetp.style.backgroundColor = &#39;red&#39;; }
}

Run the above code and we see the expected p element. We directly use the ngAfterViewInit hook. Don’t ask me why, because it is the most pleasing to the eye. However, we will also have a special article later to analyze the life cycle of Angular components in detail. After successfully obtaining the p element, the rest is easy. Set the background color of the element directly through the style object.

Although the function has been implemented, is there still room for optimization?

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 = &#39;Semlinker&#39;;

 @ViewChild(&#39;greet&#39;)
 greetp: ElementRef;

 ngAfterViewInit() { this.greetp.nativeElement.style.backgroundColor = &#39;red&#39;;
 }
}

Do you feel that you are instantly superior, but wait a minute, is there room for further optimization of the above code? We see that the background of the p element is set, and we are the default application running environment in the browser. As mentioned before, we need to minimize the strong coupling relationship between the application layer and the rendering layer, so that our application can run flexibly in different environments. Finally, let’s take a look at the final optimized code:

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 = &#39;Semlinker&#39;; @ViewChild(&#39;greet&#39;)
 greetp: ElementRef; constructor(private elementRef: ElementRef, private renderer: Renderer) { }

 ngAfterViewInit() { // this.greetp.nativeElement.style.backgroundColor = &#39;red&#39;; this.renderer.setElementStyle(this.greetp.nativeElement, &#39;backgroundColor&#39;, &#39;red&#39;);
 }
}

1. What other commonly used methods are there in the 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;  
}

It should be noted that in Angular 4.x version, we use Renderer2 instead of Renderer (Angular V2).

2. What other commonly used methods are there in 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;
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About the method of closing the component by clicking outside the component in Vue (detailed tutorial)

About using How to insert variable parameters into vue.js tag attributes (detailed tutorial)

Problems with routing permission management using Vue (detailed tutorial)

The above is the detailed content of How to use ElementRef application in Angular4. For more information, please follow other related articles on the PHP Chinese website!