Το Lightning Web Component (LWC) έχει το δικό του LifeCycle για να εισάγει τα στοιχεία στο DOM, να τα αποδίδει και να αφαιρεί τα στοιχεία από το DOM. Η ConnectCallback() (στη φάση τοποθέτησης) είναι μία από τις μεθόδους LifeCycle που ενεργοποιείται όταν το στοιχείο εισάγεται στο DOM. Σε αυτόν τον οδηγό, θα συζητήσουμε τη connectioncallback() και τα διάφορα σενάρια που περιλαμβάνουν αυτήν τη μέθοδο με παραδείγματα.
- Το constructor() είναι η πρώτη μέθοδος στο άγκιστρο Lifecycle που καλείται όταν δημιουργείται η παρουσία 'Component'. Οι ιδιότητες των εξαρτημάτων σε αυτή τη φάση δεν θα είναι έτοιμες. Εάν θέλετε να αποκτήσετε πρόσβαση στο στοιχείο κεντρικού υπολογιστή, πρέπει να χρησιμοποιήσουμε το 'this.template'. Καθώς τα θυγατρικά στοιχεία σε αυτήν τη φάση δεν θα υπάρχουν, δεν μπορούμε να έχουμε πρόσβαση και στα θυγατρικά στοιχεία. Η Super() χρησιμοποιείται σε αυτή τη μέθοδο.
- Η ConnectCallback() είναι η δεύτερη μέθοδος (φάση 2) που καλείται όταν ένα στοιχείο εισάγεται στο DOM. Σε αυτή την περίπτωση, το άγκιστρο ρέει από γονέα σε παιδί. Οι ιδιότητες των εξαρτημάτων σε αυτή τη φάση δεν θα είναι έτοιμες. Εάν θέλετε να αποκτήσετε πρόσβαση στο στοιχείο κεντρικού υπολογιστή, πρέπει να χρησιμοποιήσουμε το 'this.template'. Καθώς τα θυγατρικά στοιχεία σε αυτήν τη φάση δεν θα υπάρχουν, δεν μπορούμε να έχουμε πρόσβαση και στα θυγατρικά στοιχεία.
- καθιστώ (): Η επόμενη φάση είναι απόδοση. Το γονικό στοιχείο αποδίδεται και στη συνέχεια το θυγατρικό στοιχείο θα αποδοθεί εάν υπάρχει. Μετά την απόδοση του γονέα, πηγαίνει στο θυγατρικό στοιχείο (κατασκευαστής, συνδεδεμένη επανάκληση, απόδοση) και ακολουθεί τα ίδια βήματα με το γονικό στοιχείο.
- renderedCallback (): Όταν ολοκληρωθεί η απόδοση του στοιχείου και θέλετε να εκτελέσετε οποιαδήποτε λειτουργία μετά από αυτό, καλείται αυτή η μέθοδος.
- αποσυνδεδεμένη Επανάκληση (): Σε αυτό το στάδιο, το στοιχείο αφαιρείται από το DOM (απέναντι από τη συνδεδεμένη επανάκληση()).
- Το errorCallback() καλείται όταν το σφάλμα παρουσιάζεται στο LifeCycle.
Δομή Connectedcallback().
Χρησιμοποιώντας τη συνδεδεμένη επανάκληση():
- Ορίστε μια μεταβλητή και ορίστε μια τιμή ιδιότητας.
- Καλέστε το Apex μέσα σε αυτό.
- Δημιουργία και αποστολή των συμβάντων.
- Το UI API μπορεί να κληθεί.
- Υπηρεσία πλοήγησης μέσα σε αυτό.
Πρέπει να καθοριστεί στο αρχείο JavaScript ως εξής:
συνδεδεμένη Επανάκληση ( ) {
// κάνω…
}
Όλα τα παραδείγματα χρησιμοποιούν αυτό το αρχείο 'meta.xml'. Δεν θα το διευκρινίσουμε αυτό σε κάθε παράδειγμα. Τα στοιχεία LWC μπορούν να προστεθούν στη σελίδα εγγραφής, τη σελίδα εφαρμογής και την αρχική σελίδα.
εκδοχή = '1.0' ?>
<στόχοι>
<στόχος> lightning__RecordPage < / στόχος>
<στόχος> lightning__AppPage < / στόχος>
<στόχος> lightning__Αρχική σελίδα < / στόχος>
< / στόχοι>
< / LightningComponentBundle>
Παράδειγμα 1:
Θα δείξουμε τη φάση του constructor() και της connectcallback() όταν το στοιχείο φορτώνεται στο UI.
connectCallBack.html
<πρότυπο><κεραυνός-κάρτα τίτλος = 'Συνδεδεμένη επανάκληση' >
< / αστραπή-κάρτα>
< / πρότυπο>
connectCallBack.js
// Φάση τοποθέτησης - constructor()κατασκευαστής ( ) {
σούπερ ( )
κονσόλα. κούτσουρο ( 'κάλεσε τον κατασκευαστή' )
}
// Φάση τοποθέτησης - ConnectCallback()
συνδεδεμένη Επανάκληση ( ) {
κονσόλα. κούτσουρο ( 'connectedCallback call' )
}
Μοιάζει με το εξής:
Παραγωγή:
Προσθέστε αυτό το στοιχείο στη σελίδα 'Εγγραφή' οποιουδήποτε αντικειμένου.
Επιθεωρήστε τη σελίδα (κάντε κλικ αριστερά και επιλέξτε «Επιθεώρηση»). Στη συνέχεια, μεταβείτε στην καρτέλα 'Κονσόλα'.
Παράδειγμα 2:
Σε αυτό το παράδειγμα, θα δημιουργήσουμε ένα φρούτο με ένα διακοσμητικό κομματιού και θα ορίσουμε την τιμή της ιδιότητας σε 'Mango' μέσα στη μέθοδο συνδεδεμένης κλήσης(). Αυτό εμφανίζεται στη διεπαφή χρήστη.
firstExample.html
<πρότυπο><κεραυνός-κάρτα τίτλος = 'Ρύθμιση ιδιοτήτων' >
< div τάξη = 'slds-var-m-around_medium' >
< σι > Όνομα φρούτου: < / σι > {καρπός}
< / div >
< / αστραπή-κάρτα>
< / πρότυπο>
firstExample.js
εισαγωγή { LightningElement , πίστα } από 'τυχη' ;εξαγωγή Προκαθορισμένο τάξη Πρώτο Παράδειγμα εκτείνεται LightningElement {
@ φρούτα κομμάτι ;
συνδεδεμένη Επανάκληση ( ) {
// Ορισμός της τιμής της ιδιότητας σε Mango
Αυτό . καρπός = 'Μάνγκο' ;
}
}
Παραγωγή:
Προσθέστε αυτό το στοιχείο στη σελίδα 'Εγγραφή' οποιουδήποτε αντικειμένου. Εδώ το προσθέτουμε στη σελίδα 'Αρχείο λογαριασμού'. Θα δείτε ότι το φρούτο είναι «Μάνγκο».
Παράδειγμα 3:
Χρησιμοποιήστε τον προηγούμενο κώδικα και τροποποιήστε ορισμένες δηλώσεις στο αρχείο 'js' και 'html'.
Δημιουργήστε μια νέα μεταβλητή που είναι 'number' με 500 στο αρχείο 'js'. Ρυθμίστε το φρούτο σε 'μεγαλύτερο από 500' εάν ο αριθμός είναι μεγαλύτερος από 500. Διαφορετικά, ορίστε τον καρπό ως 'ίσο με 500'.
firstExample.html
<πρότυπο><κεραυνός-κάρτα τίτλος = 'Ρύθμιση ιδιοτήτων' >
< div τάξη = 'slds-var-m-around_medium' >
< σι > Κόστος: < / σι > {καρπός}
< / div >
< / αστραπή-κάρτα>
< / πρότυπο>
firstExample.js
@ φρούτα κομμάτι ;συνδεδεμένη Επανάκληση ( ) {
ας αριθμός = 500 ;
αν ( αριθμός > 500 ) {
Αυτό . καρπός = 'πάνω από 500' ;
}
αλλού {
Αυτό . καρπός = 'ίσο με 500' ;
}
}
Παραγωγή:
Ο αριθμός είναι 500. Άρα, ο καρπός κρατά το αποτέλεσμα «ίσο με 500».
Παράδειγμα 4:
Σε αυτό το σενάριο, επιστρέφουμε τις εγγραφές λογαριασμού (Αντικείμενο λογαριασμού) χρησιμοποιώντας τη μέθοδο connectioncallback().
- Αρχικά, γράφουμε μια κλάση Apex που επιστρέφει τη λίστα των πρώτων 10 λογαριασμών με τα πεδία Id, Name, Industry και Rating
- Στη συνέχεια, παρακολουθούμε τους λογαριασμούς και τους επιστρέφουμε στη μέθοδο συνδεόμενης κλήσης() καλώντας τη μέθοδο από την κλάση Apex.
- Στο αρχείο HTML, το χρησιμοποιούμε για κάθε οδηγία που επαναλαμβάνει τους λογαριασμούς και επιστρέφει το όνομα και τον κλάδο.
AccountData.apxc
δημόσιο με κοινή χρήση κατηγορίας AccountData {@AuraEnabled(cacheable=true)
δημόσια στατική λίστα<Λογαριασμός> returnAcc(){
List
Επιστροφή λογαριασμούΛίστα?
}
}
secondExample.html
<πρότυπο><κεραυνός-κάρτα τίτλος = 'Εμφάνιση λίστας λογαριασμών' >
< div τάξη = 'slds-var-m-around_medium' >
<πρότυπο if:true = { λογαριασμούς } >
<πρότυπο Για :καθε = { λογαριασμούς } Για :είδος = 'account_rec' >
< Π κλειδί = { account_rec. Ταυτότητα } >< σι > Λογαριασμός: < / σι > {account_rec.Name} < σι > Βιομηχανία: < / σι > {account_rec.Industry} < / Π >
< / πρότυπο>
< / πρότυπο>
< / div >
< / αστραπή-κάρτα>
< / πρότυπο>
secondExample.js
Εισαγάγετε το returnAcc από το Apex τάξη :εισαγωγή επιστροφήΣε. από '@salesforce/apex/AccountData.returnAcc' ;
Γράφω Αυτό κώδικας μέσα στο 'js' τάξη :
@ παρακολούθηση λογαριασμών ;
@ σφάλμα διαδρομής ;
συνδεδεμένη Επανάκληση ( ) {
επιστροφήΣυμ ( )
// Επιστρέψτε τους λογαριασμούς
. έπειτα ( αποτέλεσμα => {
Αυτό . λογαριασμούς = αποτέλεσμα ;
Αυτό . λάθος = απροσδιόριστος ;
} )
. σύλληψη ( λάθος => {
Αυτό . λάθος = λάθος ;
Αυτό . λογαριασμούς = απροσδιόριστος ;
} ) ;
}
Παραγωγή:
Οι πρώτες 10 εγγραφές λογαριασμού επιστρέφονται με το όνομα λογαριασμού και τον κλάδο.
συμπέρασμα
Τώρα, μπορείτε να χρησιμοποιήσετε τη μέθοδο συνδεόμενης επανάκλησης() στις περισσότερες περιπτώσεις ενώ εργάζεστε με δεδομένα Apex στο LWC. Σε αυτόν τον οδηγό, συζητήσαμε πώς να ορίσετε την τιμή της ιδιότητας χρησιμοποιώντας τη connectioncallback() και συμπεριλάβαμε το Apex σε αυτό. Για καλύτερη κατανόηση, δώσαμε πρώτα ένα παράδειγμα που έδειξε τις μεθόδους constructor() και connectcallback(). Πρέπει να επιθεωρήσετε την ιστοσελίδα σας και να την προβάλετε στην κονσόλα.