Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.
Με αμφίδρομη σύνδεση, τα στοιχεία σας μπορούν να μοιράζονται δεδομένα, να χειρίζονται συμβάντα και να ενημερώνουν τιμές σε πραγματικό χρόνο.
Η αμφίδρομη σύνδεση επιτρέπει στους χρήστες να εισάγουν δεδομένα από το αρχείο HTML και να τα στέλνουν στο αρχείο TypeScript και πίσω. Αυτό είναι χρήσιμο για επικύρωση εισόδου, χειρισμό και πολλά άλλα.
Αφού περάσετε δεδομένα από το HTML στο TypeScriptfile, μπορείτε να χρησιμοποιήσετε τα δεδομένα για να ολοκληρώσετε ορισμένες επιχειρηματικές λογικές. Ένα παράδειγμα σεναρίου θα ήταν εάν θέλετε να ελέγξετε εάν το όνομα που εισαγάγατε σε ένα πεδίο εισαγωγής υπήρχε ήδη.
Πώς μπορείτε να χρησιμοποιήσετε το αμφίδρομο δέσιμο;
Η αμφίδρομη σύνδεση στις εφαρμογές Angular συνήθως ορίζεται στο
.html αρχείο, χρησιμοποιώντας το ngModel διευθυντικός. Η αμφίδρομη σύνδεση σε μια φόρμα εισαγωγής μπορεί να μοιάζει κάπως έτσι:<εισαγωγή
τύπος="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
id="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
όνομα="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
placeholder="[email protected]"
[(ngModel)]="διεύθυνση ηλεκτρονικού ταχυδρομείου"
/>Στο .τσ αρχείο, το διεύθυνση ηλεκτρονικού ταχυδρομείου μεταβλητή δεσμεύεται στη διεύθυνση email από τη φόρμα.
Διεύθυνση ηλεκτρονικού ταχυδρομείου: String = ''; Πώς να ρυθμίσετε μια φόρμα παραδείγματος σε μια Angular εφαρμογή
Δημιουργώντας μια βασική εφαρμογή, μπορείτε να χρησιμοποιήσετε αμφίδρομη σύνδεση για να ελέγξετε αν υπάρχει ήδη ένα πιθανό όνομα χρήστη.
- Δημιουργώ ένα νέα εφαρμογή Angular.
- Εκτελέστε το ng παράγουν συστατικό εντολή για τη δημιουργία ενός νέου στοιχείου. Εδώ θα αποθηκεύσετε τη φόρμα.
ng δημιουργία φόρμας ονόματος χρήστη στοιχείου ελέγχου - Αντικαταστήστε όλο τον κωδικό στο δικό σας app.component.html αρχείο με τις ακόλουθες ετικέτες:
<app-username-checker-form></app-username-checker-form> - Προσθέστε το ακόλουθο CSS στο νέο σας στοιχείο .css αρχείο, που βρίσκεται στο username-checker-form.component.css, για να διαμορφώσετε τη φόρμα:
.δοχείο {
οθόνη: flex;
text-align: κέντρο;
justify-content: κέντρο;
στοίχιση-στοιχεία: κέντρο;
Ύψος: 100vh;
}.κάρτα {
πλάτος: 50%;
Χρώμα φόντου: ροδακινί;
σύνορα-ακτίνα: 1rem;
padding: 1rem;
}εισαγωγή {
σύνορο: 3px στερεό #1a659e;
περίγραμμα-ακτίνα: 5px;
ύψος: 50 px;
Ύψος γραμμής: κανονικό;
χρώμα: #1a659e;
οθόνη: μπλοκ;
πλάτος: 100%;
box-sizing: border-box;
χρήστης-επιλέγω: αυτο;
μέγεθος γραμματοσειράς: 16 px;
padding: 0 6px;
padding-αριστερά: 12px;
}εισαγωγή:Συγκεντρώνω {
σύνορο: 3px στερεό #004e89;
}.btn {
οθόνη: μπλοκ;
περίγραμμα: 0;
δρομέας: δείκτης;
σύνορο: 2px στερεό #1a659e;
περίγραμμα-ακτίνα: 3px;
χρώμα: #fff;
Ιστορικό: #1a659e;
μέγεθος γραμματοσειράς: 20 px;
βάρος γραμματοσειράς: 600;
Ύψος γραμμής: 28 px;
padding: 12px 20px;
πλάτος: 100%;
margin-top: 1rem;
}.btn:φτερουγίζω {
Ιστορικό: #004e89;
σύνορο: #004e89;
}.επιτυχία {
χρώμα: #14ae83;
}.λάθος {
χρώμα: #fd536d;
} - Προσθέστε το ακόλουθο CSS src/styles.css για να ορίσετε την οικογένεια γραμματοσειρών, το φόντο και τα χρώματα κειμένου της συνολικής εφαρμογής:
@import url("https://fonts.googleapis.com/css2?family=Poppins: wght@300;400&εμφάνιση=ανταλλαγή");σώμα {
γραμματοσειρά-οικογένεια: "Πόπινς";
χρώμα φόντου: παπάγια;
χρώμα: #1a659e;
} - Αντικαταστήστε τον κωδικό στο username-checker-form.component.html, για να προσθέσετε τη φόρμα ελέγχου ονόματος χρήστη:
<div class="δοχείο">
<div class="κάρτα">
<h1> Έλεγχος ονόματος χρήστη </h1><μορφή>
<εισαγωγή
τύπος="κείμενο"
id="όνομα χρήστη"
όνομα="όνομα χρήστη"
placeholder="Παρακαλώ εισάγετε όνομα χρήστη"
/>
<κλάση κουμπιού="btn"> Αποθηκεύσετε </button>
</form></div>
</div> - Εκτελέστε την εφαρμογή σας χρησιμοποιώντας την εντολή ng serve στο τερματικό.
ng σερβίρετε - Δείτε την αίτησή σας στο http://localhost: 4200/.
Αποστολή δεδομένων μεταξύ των αρχείων HTML και TypeScript
Χρησιμοποιήστε αμφίδρομη σύνδεση για να στείλετε δεδομένα στο δικό σας .τσ αρχείο και πίσω στο .html αρχείο. Αυτό είναι δυνατό με τη χρήση του ngModel στη φόρμα εισαγωγή ετικέτες.
- Εισαγάγετε το FormsModule μέσα στο app.module.ts αρχείο και προσθέστε το στο εισαγωγές πίνακας:
εισαγωγή { FormsModule } από '@angular/forms';@NgModule({
//...
εισαγωγές: [
// άλλες εισαγωγές
FormsModule
],
//...
}) - Δηλώστε α όνομα χρήστη μεταβλητή κλάσης στο .τσ αρχείο, username-checker-form.component.ts:
όνομα χρήστη: string = ''; - Σε username-checker-form.component.html, Προσθήκη [(ngModel)] με την όνομα χρήστη μεταβλητή στην ετικέτα εισόδου. Αυτό επιτρέπει την αμφίδρομη σύνδεση και οτιδήποτε πληκτρολογείται στην εισαγωγή ονόματος χρήστη της φόρμας εκχωρείται στη μεταβλητή ονόματος χρήστη στο .τσ αρχείο.
<εισαγωγή
τύπος="κείμενο"
id="όνομα χρήστη"
όνομα="όνομα χρήστη"
placeholder="Παρακαλώ εισάγετε όνομα χρήστη"
[(ngModel)]="όνομα χρήστη"
/> - Για να ελεγχθεί ότι τα δεδομένα αποστέλλονται στο .τσ αρχείο, δημιουργία α αποθηκεύσετε() μέθοδος σε username-checker-form.component.ts. Όταν υποβάλετε τη φόρμα, η εφαρμογή θα καλέσει αυτήν τη λειτουργία.
αποθηκεύσετε(): κενός {
κονσόλα.κούτσουρο(Αυτό.όνομα χρήστη);
} - Πρόσθεσε το ngΥποβολή οδηγία προς την
- Όταν κάνετε κλικ στο κουμπί Αποθήκευση, το αποθηκεύσετε() η λειτουργία θα εκτυπώσει την τιμή που έχει εισαχθεί στο πεδίο εισαγωγής στην κονσόλα. Μπορείτε να προβάλετε την κονσόλα κατά το χρόνο εκτέλεσης χρησιμοποιώντας τα εργαλεία προγραμματιστή του προγράμματος περιήγησης. Εάν δεν είστε εξοικειωμένοι με το πρόγραμμα περιήγησης DevTools ή την προβολή της κονσόλας, μπορείτε να μάθετε περισσότερα πώς να χρησιμοποιήσετε το Chrome DevTools.
- Στείλε το όνομα χρήστη πίσω στο .html αρχείο. Προσθέστε τη μεταβλητή ονόματος χρήστη μεταξύ αγκύλων στο username-checker-form.component.html αρχείο, μετά το
- Σε username-checker-form.component.ts, προσθέστε μερικές μεταβλητές κλάσης για να ελέγξετε εάν το όνομα χρήστη υπάρχει ήδη. Δηλώστε α ονόματα χρηστών συστοιχία με μερικά ληφθέντα ονόματα χρήστη και προσθέστε α μήνυμα συμβολοσειρά που ενημερώνει τον χρήστη για την επιταγή. Η μεταβλητή isValidUsername είναι αληθές εάν το όνομα χρήστη που καταχωρίσατε δεν βρίσκεται στον πίνακα ονομάτων χρήστη.
ονόματα χρήστη: συμβολοσειρά[] = [ 'bart', 'Λίζα', 'μαρίδα', 'leela' ];
μήνυμα: συμβολοσειρά = '';
isValidΌνομα χρήστη: boolean = ψευδής; - ο αποθηκεύσετε() Η μέθοδος θα πρέπει να ελέγξει εάν το όνομα χρήστη που καταχωρίσατε βρίσκεται ήδη στον υπάρχοντα πίνακα ονομάτων χρήστη ή όχι. Ανάλογα με το αποτέλεσμα, το μήνυμα θα ρυθμιστεί ανάλογα.
αποθηκεύσετε(): κενός {
if (this.username != '') {
Αυτό.isValidUsername = !Αυτό.usernames.includes(
Αυτό.όνομα χρήστη.to LowerCase()
);αν (Αυτό.isValidΌνομα χρήστη) {
Αυτό.μήνυμα = "Το νέο σας όνομα χρήστη είναι "${Αυτό.username}'`;
} αλλού {
Αυτό.μήνυμα = "Το όνομα χρήστη"${Αυτό.username}'έχει ήδη ληφθεί';
}
}
} - Συμπλήρωσε το username-checker-form.component.html αρχείο δείχνοντας εάν το καταχωρημένο όνομα χρήστη υπάρχει ή όχι. Προσθέστε ένα μήνυμα σφάλματος κάτω από το
ετικέτες μετά τη φόρμα. ο isValidUsername Η μεταβλητή είναι χρήσιμη εδώ για τον προσδιορισμό του χρώματος του μηνύματος που εμφανίζεται.
<p *ngIf="όνομα χρήστη" [ngClass]="είναι ValidUsername; 'επιτυχία': 'λάθος'">
{{ μήνυμα }}
</Π> - Στο πρόγραμμα περιήγησής σας στο localhost: 4200, προσπαθήστε να εισαγάγετε ένα όνομα χρήστη που υπάρχει στον πίνακα ονομάτων χρήστη: Στη συνέχεια, προσπαθήστε να εισαγάγετε ένα όνομα χρήστη που δεν το κάνει.
Χρήση αμφίδρομης σύνδεσης για αποστολή δεδομένων κατά την ανάπτυξη μιας εφαρμογής
Η αμφίδρομη δέσμευση είναι χρήσιμη για επικύρωση, ελέγχους, υπολογισμούς και άλλα. Επιτρέπει στα στοιχεία να επικοινωνούν και να μοιράζονται δεδομένα σε πραγματικό χρόνο.
Μπορείτε να χρησιμοποιήσετε λειτουργίες αμφίδρομης σύνδεσης σε διάφορα μέρη μιας εφαρμογής. Μόλις λάβετε τα δεδομένα από τον χρήστη, μπορείτε να εκτελέσετε επιχειρηματική λογική και να ενημερώσετε τον χρήστη για τα αποτελέσματα.
Μερικές φορές, θα θέλατε να αποθηκεύσετε τα δεδομένα του χρήστη σε μια βάση δεδομένων. Μπορείτε να εξερευνήσετε διαφορετικούς τύπους παρόχων βάσεων δεδομένων που μπορείτε να χρησιμοποιήσετε, συμπεριλαμβανομένης της βάσης δεδομένων Firebase NoSQL.
