Lightning Web Component (LWC) verfügt über einen eigenen Lebenszyklus, um die Komponente(n) in das DOM einzufügen, sie zu rendern und die Komponente(n) aus dem DOM zu entfernen. Die connectedCallback() (in der Montagephase) ist eine der LifeCycle-Methoden, die ausgelöst wird, wenn die Komponente in das DOM eingefügt wird. In diesem Leitfaden besprechen wir die Funktion „connectioncallback()“ und die verschiedenen Szenarien, in denen diese Methode enthalten ist, anhand von Beispielen.
- Der Konstruktor() ist die erste Methode im Lifecycle-Hook, die aufgerufen wird, wenn die „Component“-Instanz erstellt wird. Die Komponenteneigenschaften sind in dieser Phase noch nicht bereit. Wenn Sie auf das Host-Element zugreifen möchten, müssen wir „this.template“ verwenden. Da die untergeordneten Komponenten in dieser Phase nicht vorhanden sind, können wir auch nicht auf die untergeordneten Komponenten zugreifen. Super() wird in dieser Methode verwendet.
- Die connectedcallback() ist die zweite Methode (Phase 2), die aufgerufen wird, wenn ein Element in DOM eingefügt wird. In diesem Fall fließt der Hook vom übergeordneten Element zum untergeordneten Element. Die Komponenteneigenschaften sind in dieser Phase noch nicht bereit. Wenn Sie auf das Host-Element zugreifen möchten, müssen wir „this.template“ verwenden. Da die untergeordneten Komponenten in dieser Phase nicht vorhanden sind, können wir auch nicht auf die untergeordneten Komponenten zugreifen.
- machen (): Die ext-Phase ist das Rendern. Die übergeordnete Komponente wird gerendert und anschließend wird die untergeordnete Komponente gerendert, sofern vorhanden. Nach dem Rendern des übergeordneten Elements geht es zur untergeordneten Komponente (Konstruktor, verbundener Rückruf, Rendern) und führt die gleichen Schritte wie das übergeordnete Element aus.
- renderedCallback (): Wenn das Rendern der Komponente abgeschlossen ist und Sie danach eine beliebige Operation ausführen möchten, wird diese Methode aufgerufen.
- getrenntRückruf (): In dieser Phase wird das Element aus dem DOM entfernt (im Gegensatz zum connectedcallback()).
- Der errorCallback() wird aufgerufen, wenn der Fehler im LifeCycle auftritt.
Connectedcallback()-Struktur
Verwendung von connectedcallback():
- Definieren Sie eine Variable und legen Sie einen Eigenschaftswert fest.
- Rufen Sie den Apex darin auf.
- Erstellen und versenden Sie die Ereignisse.
- Die UI-API kann aufgerufen werden.
- Navigationsdienst darin.
Es muss in der JavaScript-Datei wie folgt angegeben werden:
connectedCallback ( ) {
// Tun…
}
Alle Beispiele verwenden diese „meta.xml“-Datei. Wir werden dies nicht in jedem Beispiel angeben. Die LWC-Komponenten können Ihrer Datensatzseite, App-Seite und Homepage hinzugefügt werden.
Ausführung = „1,0“ ?>
< / Ziele>
< / LightningComponentBundle>
Beispiel 1:
Wir werden die Konstruktor()- und die connectedcallback()-Phase demonstrieren, wenn die Komponente auf der Benutzeroberfläche geladen wird.
connectedCallBack.html
< / Blitzkarte>
< / Vorlage>
connectedCallBack.js
// Montagephase - Konstruktor()Konstrukteur ( ) {
super ( )
Konsole. Protokoll ( „Konstrukteur namens“ )
}
// Montagephase - connectedCallback()
connectedCallback ( ) {
Konsole. Protokoll ( „connectedCallback aufgerufen“ )
}
Es sieht wie folgt aus:
Ausgabe:
Fügen Sie diese Komponente zur Seite „Datensatz“ eines beliebigen Objekts hinzu.
Überprüfen Sie die Seite (klicken Sie links und wählen Sie „Inspizieren“). Gehen Sie dann zur Registerkarte „Konsole“.
Beispiel 2:
In diesem Beispiel erstellen wir eine Frucht mit einem Spurdekorator und setzen den Eigenschaftswert innerhalb der Methode connectedcallback() auf „Mango“. Dies wird auf der Benutzeroberfläche angezeigt.
erstesBeispiel.html
< div Klasse = „slds-var-m-around_medium“ >
< B > Fruchtname: < / B > {Obst}
< / div >
< / Blitzkarte>
< / Vorlage>
firstExample.js
importieren { LightningElement , Schiene } aus 'Glück' ;Export Standard Klasse Erstes Beispiel erweitert LightningElement {
@ Obst verfolgen ;
connectedCallback ( ) {
// Eigenschaftswert auf Mango setzen
Das . Obst = 'Mango' ;
}
}
Ausgabe:
Fügen Sie diese Komponente zur Seite „Datensatz“ eines beliebigen Objekts hinzu. Hier fügen wir es der Seite „Kontodatensatz“ hinzu. Sie werden sehen, dass es sich bei der Frucht um „Mango“ handelt.
Beispiel 3:
Nutzen Sie den vorherigen Code und ändern Sie einige Anweisungen in den Dateien „js“ und „html“.
Erstellen Sie in der Datei „js“ eine neue Variable mit dem Namen „number“ und 500. Stellen Sie die Frucht auf „größer als 500“ ein, wenn die Zahl größer als 500 ist. Andernfalls stellen Sie die Frucht auf „gleich 500“ ein.
erstesBeispiel.html
< div Klasse = „slds-var-m-around_medium“ >
< B > Kosten: < / B > {Obst}
< / div >
< / Blitzkarte>
< / Vorlage>
firstExample.js
@ Obst verfolgen ;connectedCallback ( ) {
lass Zahl = 500 ;
Wenn ( Nummer > 500 ) {
Das . Obst = „größer als 500“ ;
}
anders {
Das . Obst = „gleich 500“ ;
}
}
Ausgabe:
Die Zahl ist 500. Die Frucht hält also das Ergebnis als „gleich 500“.
Beispiel 4:
In diesem Szenario geben wir die Kontodatensätze (Kontoobjekt) mithilfe der Methode connectedcallback() zurück.
- Zuerst schreiben wir eine Apex-Klasse, die die Liste der ersten 10 Konten mit den Feldern „ID“, „Name“, „Branche“ und „Bewertung“ zurückgibt
- Als Nächstes verfolgen wir die Konten und geben sie in der Methode connectedcallback() zurück, indem wir die Methode aus der Apex-Klasse aufrufen.
- In der HTML-Datei verwenden wir es für jede Anweisung, die die Konten iteriert und den Namen und die Branche zurückgibt.
AccountData.apxc
öffentlich mit Freigabeklasse AccountData {@AuraEnabled(cacheable=true)
öffentliche statische Liste
List
return accountList;
}
}
zweites Beispiel.html
< div Klasse = „slds-var-m-around_medium“ >
< P Schlüssel = { account_rec. Ausweis } >< B > Konto: < / B > {account_rec.Name} < B > Industrie: < / B > {account_rec.Industry} < / P >
< / Vorlage>
< / Vorlage>
< / div >
< / Blitzkarte>
< / Vorlage>
secondExample.js
Importieren Sie returnAcc aus dem Apex Klasse :importieren returnAcc von '@salesforce/apex/AccountData.returnAcc' ;
Schreiben Das Code innerhalb der „js“ Klasse :
@ Konten verfolgen ;
@ Spurfehler ;
connectedCallback ( ) {
returnAcc ( )
// Die Konten zurückgeben
. Dann ( Ergebnis => {
Das . Konten = Ergebnis ;
Das . Fehler = nicht definiert ;
} )
. fangen ( Fehler => {
Das . Fehler = Fehler ;
Das . Konten = nicht definiert ;
} ) ;
}
Ausgabe:
Die ersten 10 Kontodatensätze werden mit dem Kontonamen und der Branche zurückgegeben.
Abschluss
Jetzt können Sie in den meisten Fällen die Methode connectedcallback() verwenden, während Sie mit Apex-Daten in LWC arbeiten. In dieser Anleitung haben wir besprochen, wie man den Eigenschaftswert mit connectedcallback() festlegt und Apex darin eingebunden. Zum besseren Verständnis haben wir zunächst ein Beispiel bereitgestellt, das die Methoden „constructor()“ und „connectedcallback()“ zeigt. Sie müssen Ihre Webseite überprüfen und in der Konsole anzeigen.