Eine kurze Diskussion über die Verwendung von @ViewChild in Angular

Dieser Artikel führt Sie durch @ViewChild in Angular und stellt vor, wie Sie @ViewChild verwenden.

Einfach ausgedrückt

Mein persönliches Verständnis von @ViewChild ist: Es ist eine Referenz, und Sie können diese Komponente oder dieses Element über diese Referenz erhalten. Und wir können die erhaltenen Werte und Methoden dieser Komponente verwenden. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Um intuitiver zu erfahren, was es tut, gehen Sie direkt zum Code

Rufen Sie die Unterkomponente über @ViewChild ab, rufen Sie den Wert der Unterkomponente ab und rufen Sie die Methode auf der Unterkomponente

Kind der untergeordneten Komponente

content:'Zita';
changeChildCon() {
	this.content = 'Zita1111'
}

Elternkomponente der übergeordneten Komponente

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

Erhalten Sie ein Element über @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元素的样式

Durch diesen Code sehen Sie also das Abbildungs-Tag auf der Seite Die Schriftfarbe in hat sich in Rot geändert

Besondere Erinnerung

nach angle8.0Stellen Sie sicher, dass Sie das Attribut{ static: true } hinzufügen. Darüber hinaus lautet die offizielle Erklärung für dieses Attribut:

Metadatenattribute:
Selektor – der für die Abfrage verwendete Anweisungstyp oder -name.
lesen – Liest ein weiteres Token aus dem abgefragten Element.
statisch – „True“, um Abfrageergebnisse aufzulösen, bevor die Änderungserkennung ausgeführt wird, „false“, um nach der Änderungserkennung aufzulösen. Der Standardwert ist „false“, wird nach der Änderungserkennung analysiert. Der Standardwert ist false.

Wie ist das zu verstehen?

Liegt hauptsächlich in dem Knoten, in dem die Aktion „Änderungserkennung“ stattfindet.

Beispielsweise verwenden wir häufig die Anweisungen ngIf und ngShow, wenn diese Anweisungen zur Unterkomponente hinzugefügt werden und gleichzeitig „true“ ist. Wenn wir dann das Referenzziel erfassen, ist der erhaltene Wert undefiniert

An diesem Punkt ist mein Verständnis von @ViewChild, das häufig in tatsächlichen Projekten verwendet wird, vorbei ... Lassen Sie mich mit Ihnen teilen

Mehr zum Thema Programmierung Wissen, besuchen Sie bitte:

Programmierunterricht

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Verwendung von @ViewChild in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!