Lightning Web Component (LWC) heeft zijn eigen levenscyclus om de component(en) in de DOM in te voegen, weer te geven en de component(en) uit de DOM te verwijderen. De connectedCallback() (in de montagefase) is een van de LifeCycle-methoden die wordt geactiveerd wanneer de component in de DOM wordt ingevoegd. In deze handleiding bespreken we de Connectioncallback() en de verschillende scenario's waarin deze methode wordt gebruikt, met voorbeelden.
- De constructor() is de eerste methode in de Lifecycle-hook die wordt aangeroepen wanneer de instantie “Component” wordt gemaakt. De componenteigenschappen zijn in deze fase nog niet gereed. Als u toegang wilt krijgen tot het hostelement, moeten we “this.template” gebruiken. Omdat de onderliggende componenten in deze fase niet bestaan, hebben we ook geen toegang tot de onderliggende componenten. Bij deze methode wordt Super() gebruikt.
- De connectedcallback() is de tweede methode (fase 2) die wordt aangeroepen wanneer een element in DOM wordt ingevoegd. In dit geval vloeit de haak van ouder naar kind. De componenteigenschappen zijn in deze fase nog niet gereed. Als u toegang wilt krijgen tot het hostelement, moeten we “this.template” gebruiken. Omdat de onderliggende componenten in deze fase niet bestaan, hebben we ook geen toegang tot de onderliggende componenten.
- veroorzaken (): De ext-fase wordt weergegeven. De bovenliggende component wordt weergegeven en vervolgens wordt de onderliggende component weergegeven, als deze bestaat. Nadat de ouder is weergegeven, gaat deze naar de onderliggende component (constructor, connectedcallback, render) en volgt dezelfde stappen als de ouder.
- teruggebeld (): Wanneer het renderen van de component is voltooid en u hierna een bewerking wilt uitvoeren, wordt deze methode aangeroepen.
- verbinding verbrokenTerugbellen (): In deze fase wordt het element verwijderd uit de DOM (in tegenstelling tot de connectedcallback()).
- De errorCallback() wordt aangeroepen wanneer de fout optreedt in de LifeCycle.
Connectedcallback()-structuur
Met behulp van de connectedcallback():
- Definieer een variabele en stel een eigenschapswaarde in.
- Roep de Apex erin.
- Maak en verzend de gebeurtenissen.
- De UI API kan worden aangeroepen.
- Navigatiedienst erin.
Het moet als volgt in het JavaScript-bestand worden gespecificeerd:
verbondenTerugbellen ( ) {
// Doen…
}
Alle voorbeelden maken gebruik van dit “meta.xml”-bestand. We zullen dit niet bij elk voorbeeld specificeren. De LWC-componenten kunnen worden toegevoegd aan uw recordpagina, apppagina en startpagina.
versie = '1,0' ?>
< / doelen>
< / LightningComponentBundel>
Voorbeeld 1:
We zullen de constructor() en de connectedcallback() fase demonstreren wanneer de component in de gebruikersinterface wordt geladen.
connectedCallBack.html
< / bliksem-kaart>
< / sjabloon>
connectedCallBack.js
// Montagefase - constructor()bouwer ( ) {
super ( )
troosten. loggen ( 'constructeur gebeld' )
}
// Montagefase - connectedCallback()
verbondenTerugbellen ( ) {
troosten. loggen ( 'connectedCallback gebeld' )
}
Het ziet er als volgt uit:
Uitgang:
Voeg deze component toe aan de “Record”-pagina van een willekeurig object.
Inspecteer de pagina (klik links en selecteer “Inspecteren”). Ga vervolgens naar het tabblad “Console”.
Voorbeeld 2:
In dit voorbeeld maken we een vrucht met een spoordecorateur en stellen we de eigenschapswaarde in op 'Mango' binnen de connectedcallback() -methode. Dit wordt weergegeven op de gebruikersinterface.
eersteVoorbeeld.html
< div klas = 'slds-var-m-rond_medium' >
< B > Fruitnaam: < / B > {fruit}
< / div >
< / bliksem-kaart>
< / sjabloon>
eersteVoorbeeld.js
importeren { BliksemElement , spoor } van 'geluk' ;exporteren standaard klas Eerste voorbeeld strekt zich uit BliksemElement {
@ fruit volgen ;
verbondenTerugbellen ( ) {
// De eigenschapswaarde instellen op Mango
dit . fruit = 'Mango' ;
}
}
Uitgang:
Voeg deze component toe aan de “Record”-pagina van een willekeurig object. Hier voegen we het toe aan de pagina 'Accountrecord'. Je zult zien dat de vrucht 'Mango' is.
Voorbeeld 3:
Gebruik de vorige code en wijzig enkele instructies in het “js”- en “html”-bestand.
Maak een nieuwe variabele die “number” is met 500 in het “js” -bestand. Stel de vrucht in op 'groter dan 500' als het getal groter is dan 500. Anders stelt u de vrucht in op 'gelijk aan 500'.
eersteVoorbeeld.html
< div klas = 'slds-var-m-rond_medium' >
< B > Kosten: < / B > {fruit}
< / div >
< / bliksem-kaart>
< / sjabloon>
eersteVoorbeeld.js
@ fruit volgen ;verbondenTerugbellen ( ) {
laat nummer = 500 ;
als ( nummer > 500 ) {
dit . fruit = 'groter dan 500' ;
}
anders {
dit . fruit = 'gelijk aan 500' ;
}
}
Uitgang:
Het getal is 500. De vrucht houdt dus het resultaat vast als “gelijk aan 500”.
Voorbeeld 4:
In dit scenario retourneren we de accountrecords (Account-object) met behulp van de connectedcallback() -methode.
- Eerst schrijven we een Apex-klasse die de lijst met de eerste tien accounts retourneert met de velden Id, Naam, Industrie en Beoordeling
- Vervolgens volgen we de accounts en retourneren ze in de connectedcallback() -methode door de methode aan te roepen vanuit de Apex-klasse.
- In het HTML-bestand gebruiken we het voor elke richtlijn die de accounts herhaalt en de Naam en Industrie retourneert.
AccountData.apxc
openbaar met deelklasse AccountData {@AuraEnabled(cachebaar=waar)
openbare statische Lijst
Lijst
retour accountLijst;
}
}
tweedeVoorbeeld.html
< div klas = 'slds-var-m-rond_medium' >
< P sleutel = { account_rec. ID kaart } >< B > Rekening: < / B > {account_rec.Name} < B > Industrie: < / B > {account_rec.Industry} < / P >
< / sjabloon>
< / sjabloon>
< / div >
< / bliksem-kaart>
< / sjabloon>
tweedeVoorbeeld.js
Importeer de returnAcc uit de Apex klas :importeren retourAcc van '@salesforce/apex/AccountData.returnAcc' ;
Schrijven dit code binnen de “js” klas :
@ rekeningen bijhouden ;
@ spoorfout ;
verbondenTerugbellen ( ) {
retourAc ( )
// Retourneer de rekeningen
. Dan ( resultaat => {
dit . rekeningen = resultaat ;
dit . fout = ongedefinieerd ;
} )
. vangst ( fout => {
dit . fout = fout ;
dit . rekeningen = ongedefinieerd ;
} ) ;
}
Uitgang:
De eerste 10 accountrecords worden geretourneerd met de accountnaam en branche.
Conclusie
Nu kunt u in de meeste gevallen de methode connectedcallback() gebruiken terwijl u met Apex-gegevens in LWC werkt. In deze handleiding hebben we besproken hoe u de eigenschapswaarde kunt instellen met connectedcallback() en Apex daarin opgenomen. Voor een beter begrip hebben we eerst een voorbeeld gegeven waarin de methoden constructor() en connectedcallback() worden getoond. U moet uw webpagina inspecteren en deze in de console bekijken.