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

Récupérez le sous-composant via @ViewChild, obtenez la valeur du sous-composant et appelez la méthode du sous-composant

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

Obtenir un élément via @ViewChild

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

Rappel spécial

après angulaire8.0Assurez-vous d'ajouter l'attribut{ static: true } De plus, l'explication officielle de cet attribut est :

.

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.

Comment comprendre ?

Se situe principalement dans le nœud où se produit l'action de "détection de changement".

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

Plus de connaissances liées à la programmation, veuillez visiter :

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!