Perbincangan ringkas tentang penggunaan @ViewChild dalam Angular

青灯夜游
Lepaskan: 2021-07-21 10:49:14
ke hadapan
4097 orang telah melayarinya

Artikel ini akan membawa anda melalui @ViewChild dalam Angular dan memperkenalkan cara menggunakan @ViewChild.

Perbincangan ringkas tentang penggunaan @ViewChild dalam Angular

Ringkasnya

Pemahaman peribadi saya tentang @ViewChild ialah: ia adalah rujukan, yang melaluinya komponen atau elemen boleh diperolehi. Dan kita boleh menggunakan nilai dan kaedah yang diperolehi dari komponen ini. [Cadangan tutorial berkaitan: "tutorial sudut"]

Untuk mengetahui dengan lebih intuitif perkara yang dilakukannya, pergi terus ke kod

Dapatkan subkomponen melalui @ViewChild , dapatkan nilai komponen anak, panggil kaedah komponen anak

anak komponen anak

content:'Zita';
changeChildCon() {
	this.content = 'Zita1111'
}
Salin selepas log masuk

induk komponen induk

html
<app-child></app-child>

ts
import { ViewChild } from '@angular/core';
@ViewChild('ChildrenView', { static: true }) childrenView: any;  //ChildrenView为子组件中的#后边的值,childrenView是个名称用来指代子组件
this.childrenView.content   // Zita  获取子组件中的值
this.childrenView.changeChildCon()  // 执行子组件中的方法
this.childrenView.content   // Zita1111
Salin selepas log masuk

melalui @ ViewChild mendapat elemen tertentu

html

<figure>
  我是父元素中的一个标签figure,我可以通过viewchild来获取,并且获取到我之后可以改变我的样式
</figure>
Salin selepas log masuk

ts

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('parBele', { static: true }) eleRef: ElementRef;
this.eleRef.nativeElement.style.color = 'red';  // 更改获取的dom元素的样式
Salin selepas log masuk

Kemudian, melalui kod ini, anda akan melihat pada halaman, Warna fon dalam teg rajah bertukar kepada merah
Perbincangan ringkas tentang penggunaan @ViewChild dalam Angular

Peringatan khas

Selepas angular8.0Pastikan anda menambah { statik: benar } Atribut ini, sebagai tambahan, penjelasan rasmi untuk atribut ini ialah:

Atribut metadata:
pemilih - jenis arahan atau nama yang digunakan untuk pertanyaan.
baca - Baca token lain daripada elemen yang ditanya.
statik - Benar untuk menyelesaikan hasil pertanyaan sebelum pengesanan perubahan dijalankan, salah untuk menyelesaikan selepas pengesanan perubahan Lalai kepada palsu.

Untuk statik, ini bermakna: jika benar, pengesanan perubahan sedang menjalankan hasil pertanyaan. dihuraikan sebelum, atau selepas pengesanan perubahan jika palsu. Lalai adalah palsu.

Bagaimana anda memahaminya?

Terutamanya terletak pada nod di mana tindakan "pengesanan perubahan" berlaku.
Sebagai contoh, kita sering menggunakan arahan ngIf dan ngShow Jika arahan ini ditambahkan pada subkomponen, dan statik adalah benar pada masa yang sama. Kemudian, apabila kita menangkap sasaran rujukan, nilai yang diperolehi akan menjadi tidak ditentukan

Pada ketika ini, pemahaman saya tentang @ViewChild, yang sering digunakan dalam projek sebenar, telah berakhir... Izinkan saya berkongsi galakan saya dengan anda

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengajaran Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang penggunaan @ViewChild dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan