Maison > Article > interface Web > Une brève discussion sur l'utilisation de @ViewChild dans Angular
Cet article vous fera découvrir @ViewChild dans Angular et vous présentera comment utiliser @ViewChild.
En termes simples
Ma compréhension personnelle de @ViewChild est la suivante : c'est une référence, et vous pouvez obtenir ce composant ou cet élément via cette référence. Et nous pouvons utiliser les valeurs et méthodes obtenues de ce composant. [Tutoriels associés recommandés : "Tutoriel angulaire"]
Afin de savoir plus intuitivement ce qu'il fait, accédez directement au code
Composant enfant enfant
content:'Zita'; changeChildCon() { this.content = 'Zita1111' }
Composant parent parent
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
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元素的样式
Donc, grâce à ce code, vous verrez l'étiquette de figure sur le page La couleur de la police est devenue rouge
après angulaire8.0Assurez-vous d'ajouter l'attribut{ static: true } De plus, l'explication officielle de cet attribut est :
.Comment comprendre ? Se situe principalement dans le nœud où se produit l'action de "détection de changement".Attributs des métadonnées :
sélecteur - le type d'instruction ou le nom utilisé pour la requête.
read - Lit un autre jeton à partir de l'élément interrogé.
static - True pour résoudre les résultats de la requête avant l'exécution de la détection des modifications, false pour les résoudre après la détection des modifications. La valeur par défaut est false , est analysée après la détection des modifications. La valeur par défaut est false.
Par exemple, nous utilisons souvent les instructions ngIf et ngShow si ces instructions sont ajoutées au sous-composant et que static est vrai en même temps. Ensuite, lorsque nous capturons la cible référente, la valeur obtenue sera indéfinie
À ce stade, ma compréhension de @ViewChild qui est souvent utilisé dans des projets réels est terminée... Permettez-moi de partager avec vous
Enseignement de la programmation
! !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!