Perbincangan ringkas tentang penggunaan @ViewChild dalam Angular

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

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

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

melalui @ ViewChild mendapat elemen tertentu

html

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

ts

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

Kemudian, melalui kod ini, anda akan melihat pada halaman, Warna fon dalam teg rajah bertukar kepada merah

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!