Comment manipuler correctement le DOM avec Angular

Cet article présente principalement comment utiliser correctement le DOM dans Angular. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Je n'ai pas eu d'autre choix que de reprendre un. ancien projet. Le précédent Mon frère utilisait beaucoup JQuery pour manipuler le DOM dans le projet Angular, qui est vraiment peu sophistiqué. Alors comment utiliser Angular pour manipuler le DOM avec élégance ?

Obtenir l'élément

1. ElementRef --- Un wrapper autour d'un élément natif à l'intérieur d'une vue.

　 Injecter ElementRef dans le constructeur du composant pour obtenir le package de l’intégralité de l’élément du composant.

@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

  constructor(    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    console.dir(this.el);
  }
｝

　 Le nativeElement dans ElementRef est l'élément DOM le plus externe du composant. Ensuite, grâce à la méthode de positionnement native du DOM, l'élément de sélection spécifié peut être obtenu.

  getDomTest() {
    console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 获取指定的子元素
  }

2. @viewChild() --- Vous pouvez utiliser ViewChild pour obtenir le premier élément ou la directive correspondant au sélecteur de la vue DOM

. @viewChild peut obtenir l'élément spécifié, et la méthode spécifiée peut être une variable locale ou un type de composant

// HTML
<p class="tip-test-wrapper">
　　　
    <button class="test-get-dom"  (click)="getDomTest()">测试获取DOM</button>
 </p>
　　<app-dialog></app-dialog>


// ts
import { DialogComponent } from &#39;./../../common/components/dialog/dialog.component&#39;;


@Component({
  selector: &#39;app-test-page&#39;,
  templateUrl: &#39;./test-page.component.html&#39;,
  styleUrls: [&#39;./test-page.component.scss&#39;]
})
export class TestPageComponent implements OnInit {
　 // 通过本地变量获取元素  可通过read来指定获取的元素类型
  @ViewChild(&#39;testdom&#39; , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild(&#39;testdom&#39;) viewelement: ElementRef;

　 // 通过组件类型来获取
  @ViewChild(DialogComponent) viewcontent: DialogComponent;

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    // console.dir(this.el.nativeElement.querySelector(&#39;.test-get-dom&#39;));
    console.dir(this.viewcontainer);
    console.dir(this.viewelement);
    console.dir(this.viewcontent);
  }
}

　

Remarques : ElementRef ou @viewChild pour obtenir des éléments, doivent être utilisés après le cycle ngAfterViewInit.

3. @viewChildren -- Vous pouvez utiliser ViewChildren pour obtenir la {@link QueryList} d'éléments ou de directives de la vue DOM.

@viewChild renverra le premier élément qui remplit les éléments de conditions, que se passe-t-il si vous avez besoin d'obtenir plusieurs éléments qui remplissent les conditions ?

@viewChildren renverra une liste de tous les éléments qui remplissent les conditions. La méthode de spécification du sélecteur est la même que celle de @viewChild.

// 复制一个元素
  <p class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </p>
  <p class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </p>
</p>
<app-dialog></app-dialog>
<app-dialog></app-dialog>// tsimport { DialogComponent } from &#39;./../../common/components/dialog/dialog.component&#39;;


@Component({
  selector: &#39;app-test-page&#39;,
  templateUrl: &#39;./test-page.component.html&#39;,
  styleUrls: [&#39;./test-page.component.scss&#39;]
})
export class TestPageComponent implements OnInit {

  @ViewChild(&#39;testdom&#39; , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild(&#39;testdom&#39;) viewelement: ElementRef;  @ViewChildren(&#39;testdom&#39;) viewelements: QueryList<any>;

  @ViewChild(DialogComponent) viewcontent: DialogComponent;  @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

  constructor(    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {    // console.dir(this.el.nativeElement.querySelector(&#39;.test-get-dom&#39;));    // console.dir(this.viewcontainer);
    console.dir(this.viewelement);
    console.dir(this.viewelements);
    console.dir(this.viewcontent);
    console.dir(this.viewcontents);
  }

Opération DOM --- Renderer2

Après l'obtention du dom, comment faire fonctionner le dom ? Le domAPI natif est une option, mais Angular offre un meilleur rendu multiplateforme Renderer2.

Introduisez

Renderer2 , puis injectez-le dans construct.

import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild,  , ViewChildren, QueryList} from '@angular/core';

import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

  @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild('testdom') viewelement: ElementRef;
  @ViewChildren(&#39;testdom&#39;) viewelements: QueryList<any>;
  @ViewChild(DialogComponent) viewcontent: DialogComponent;
  @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {

    
  }
｝

　

renderer2 fournit une API riche à utiliser, comme suit :

Résumé

Par elementRef Ou @viewChild @viewChildren obtient l'élément, puis exploite l'élément via l'API fournie par renderer2. Mais n'oubliez pas de ne pas l'utiliser avant le cycle ngAfterViewInit. Grâce aux méthodes fournies par Angular, la plupart des besoins d'exploitation du DOM peuvent être satisfaits. S'il y a une scène spéciale, il est bien sûr préférable d'utiliser le DOM natif

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

Recommandations associées :

JS natif et jQuery utilisent respectivement jsonp pour obtenir des "informations météorologiques actuelles"

Objet d'erreur JavaScript Analyse de

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!