Rumah > Artikel > hujung hadapan web > Artikel untuk bercakap tentang cara mengendalikan elemen DOM dalam Angular
Bagaimana untuk mengendalikan elemen DOM dalam Angular? Artikel berikut akan memperkenalkan kepada anda cara sudut mengendalikan elemen DOM saya harap ia akan membantu anda.
Anda boleh menggunakan
javascript的原生API
untuk mendapatkan elemen DOM dalam sudut, atau memperkenalkan jQuery untuk mengendalikan DOM melaluijquery对象
, tetapi angular telah menyediakan kami dengan API yang sepadan (ElementRef
) untuk mendapatkan elemen DOM, tidak perlu menggunakan API asli atau jQuery. [Cadangan tutorial berkaitan: "tutorial sudut"]
1. Cipta komponen TestComponent
Seperti berikut: test.component.html
<div> <p>你好</p> </div> <div> <span>世界</span> </div> <h1>标题</h1> <pass-badge id="component" textColor="red">组件</pass-badge>
2. Tulis test.component.ts
fail
import { Component, OnInit } from '@angular/core'; // 1、导入 ElementRef 类 import { ElementRef} from '@angular/core'; import { PassBadge } from './compoment/pass-badge/pass-badge.component' @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], declarations: [ PassBadge ] }) export class TestComponent implements OnInit { // 2、将 ElementRef 类注入 test 组件中 constructor(private el:ElementRef) {} ngOnInit() { // 3、获取 DOM 元素 console.log(this.el.nativeElement) console.log(this.el.nativeElement.querySelector('#component')) } }
Mari kita lihat apakah this.el.nativeElement
itu
Jadi anda boleh menggunakan this.el.nativeElement.querySelector('#component')
untuk mengendalikan elemen DOM yang sepadan. Contohnya, anda boleh menukar warna teks
this.el.nativeElement.querySelector('#component').style.color = 'lightblue'
Anda boleh mendapatkan komponen melalui
ViewChild
, dan perkara yang sama ialahContentChild
,ViewChildren
danContentChildren
1. Ubah suai komponen TestComponent
dan tambahkan pembolehubah templat pada elemen yang sepadan, seperti berikut
<div> <p>你好</p> </div> <!-- 1、给元素加入模板变量 div --> <div #div> <span>世界</span> </div> <h1>标题</h1> <!-- 给组件加入模板变量 component --> <pass-badge #component textColor="red">组件</pass-badge>
2. Ubah suai test.component.ts
, Seperti berikut:
import { Component, OnInit } from '@angular/core'; import { ElementRef} from '@angular/core'; // 2、引入ViewChild import { ViewChild } from '@angular/core' @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { constructor(private el:ElementRef) {} // 3、获取元素 @ViewChild('component') dom: any; @ViewChild('div') div: any; ngOnInit() { console.log(this.dom) // PassBadgeComponent this.dom.fn() // 调用 passbadge 组件的 fn 方法 console.log(this.div) // ElementRef this.div.nativeElement.style.color = 'lightblue' // 文字颜色修改为淡蓝色 } }
Keputusan akhir adalah seperti berikut
Daripada keputusan kami boleh tahu bahawa apabila menggunakan pembolehubah templat
ViewChild
untuk mendapatkan elemen komponen, Apa yang diperolehi ialah kelas komponen yang dieksport oleh komponen (contoh di atas ialahPassBadgeComponent
Pada masa ini, hanya sifat yang terkandung dalam komponen yang boleh dikendalikan.Apabila menggunakan pembolehubah templat
>Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:ViewChild
untuk mendapatkan elemen html, kelas yang diperoleh ialah jenisElementRef
Pada masa ini, elementhis.div.nativeElement.querySelector('span')
Video Pengaturcaraan! !
Atas ialah kandungan terperinci Artikel untuk bercakap tentang cara mengendalikan elemen DOM dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!