Comment utiliser l'application ElementRef dans Angular4

Cet article présente principalement l'application d'Angular4 ElementRef. Maintenant, je le partage avec vous et le donne comme référence.

Le slogan d'Angular est - "Un framework, plusieurs plates-formes. Convient à la fois aux téléphones mobiles et aux ordinateurs de bureau (One framework.Mobile & desktop.)", c'est-à-dire qu'Angular prend en charge le développement d'applications multiplateformes, tels que : les applications Web, les applications Web mobiles, les applications mobiles natives et les applications de bureau natives, etc.

Afin de prendre en charge plusieurs plates-formes, Angular encapsule les différences des différentes plates-formes via une couche d'abstraction et unifie l'interface API. Par exemple, la classe abstraite Renderer, la classe abstraite RootRenderer, etc. sont définies. De plus, les types de référence suivants sont définis : ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef, etc. Analysons la classe ElementRef :

Le rôle d'ElementRef

Faire fonctionner directement le DOM dans la couche application provoquera un écart entre la couche application et le rendu Layer Un couplage fort empêche nos applications de s'exécuter dans différents environnements, tels que les Web Workers, car dans l'environnement des Web Workers, le DOM ne peut pas être directement manipulé. Les lecteurs intéressés peuvent lire les classes et méthodes prises en charge dans Web Workers. Grâce à ElementRef, nous pouvons encapsuler des éléments natifs dans la couche de vue sous différentes plates-formes (dans un environnement de navigateur, les éléments natifs font généralement référence à des éléments DOM). Enfin, avec l'aide de la puissante fonctionnalité d'injection de dépendances fournie par Angular, nous pouvons facilement accéder aux éléments natifs. éléments.

Définition d'ElementRef

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

Application d'ElementRef

Présentons-le d'abord Le L'exigence globale est qu'une fois la page rendue avec succès, nous souhaitons obtenir l'élément p dans la page et changer la couleur d'arrière-plan de l'élément p. Ensuite, nous mettrons en œuvre cette exigence étape par étape.

Nous devons d'abord obtenir l'élément p. Dans la section "Rôle d'ElementRef" de l'article, nous avons mentionné que nous pouvons utiliser la puissante fonctionnalité d'injection de dépendances fournie par Angular pour obtenir le natif encapsulé. élément. Dans le navigateur, l'élément natif est l'élément DOM. Il nous suffit d'abord d'obtenir l'élément my-app, puis d'utiliser l'API querySelector pour obtenir l'élément p dans la page. Le code spécifique est le suivant :

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

Lors de l'exécution du code ci-dessus, aucune exception ne se produit dans la console, mais le résultat de sortie est null . Que se passe-t-il? Aucune exception n'est levée. Nous pouvons déduire que l'objet this.elementRef.nativeElement existe, mais ses éléments enfants ne peuvent pas être trouvés, car les éléments enfants sous l'élément my-app n'ont pas encore été créés lorsque le constructeur est appelé. Alors comment résoudre ce problème ? Je réfléchis... N'y a-t-il pas setTimeout ? Nous le rénovons un peu :

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

Le problème est résolu, mais ce n'est pas le cas. Vous ne vous sentez pas très élégant ? Existe-t-il une meilleure solution ? La réponse est oui. Angular ne fournit pas de hooks pour le cycle de vie des composants. Nous pouvons choisir un moment approprié et obtenir l'élément p souhaité.

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

En exécutant le code ci-dessus, nous voyons l'élément p attendu. Nous utilisons directement le hook ngAfterViewInit. Ne me demandez pas pourquoi, car c'est le plus agréable à l'œil. Cependant, nous aurons également un article spécial plus tard pour analyser en détail le cycle de vie des composants Angular. Après avoir obtenu avec succès l'élément p, le reste est simple. Définissez la couleur d'arrière-plan de l'élément directement via l'objet de style.

Bien que la fonction ait été implémentée, y a-t-il encore place à l'optimisation ?

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

Avez-vous l'impression de vous améliorer instantanément Mais attendez, y a-t-il de la place pour une optimisation supplémentaire du code ci-dessus ? Nous voyons que l'arrière-plan de l'élément p est défini et nous sommes l'environnement d'exécution d'application par défaut dans le navigateur. Comme mentionné précédemment, nous devons minimiser la forte relation de couplage entre la couche application et la couche de rendu, afin que notre application puisse s'exécuter de manière flexible dans différents environnements. Enfin, jetons un coup d'œil au code optimisé final :

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 Quelles autres méthodes couramment utilisées existe-t-il dans l'API de rendu ?

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

Il est à noter que dans la version Angular 4.x+, nous utilisons Renderer2 à la place de Renderer (Angular V2).

2. Quelles autres méthodes couramment utilisées existe-t-il dans l'API Renderer2 ?

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

À propos de la fermeture du composant en cliquant à l'extérieur du composant dans Vue (tutoriel détaillé)

À propos de l'utilisation Méthode d'insertion de paramètres variables dans les attributs des balises vue.js (tutoriel détaillé)

Problèmes de gestion des autorisations de routage à l'aide de Vue (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!