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 ?
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')); // 获取指定的子元素 }
. @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 './../../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 { // 通过本地变量获取元素 可通过read来指定获取的元素类型 @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef; @ViewChild('testdom') viewelement: ElementRef; // 通过组件类型来获取 @ViewChild(DialogComponent) viewcontent: DialogComponent; constructor( private el: ElementRef ) { } ngOnInit() { } getDomTest() { // console.dir(this.el.nativeElement.querySelector('.test-get-dom')); 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 './../../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('testdom') viewelements: QueryList<any>;
@ViewChild(DialogComponent) viewcontent: DialogComponent; @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>; constructor( private el: ElementRef ) { } ngOnInit() { } getDomTest() { // console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // console.dir(this.viewcontainer); console.dir(this.viewelement); console.dir(this.viewelements); console.dir(this.viewcontent); console.dir(this.viewcontents); }
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('testdom') 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 :
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!