Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.
Cu legarea bidirecțională, componentele dvs. pot partaja date, gestiona evenimente și pot actualiza valorile în timp real.
Legarea bidirecțională permite utilizatorilor să introducă date din fișierul HTML și să le trimită în fișierul TypeScript și înapoi. Acest lucru este util pentru validarea intrărilor, manipulare și multe altele.
Odată ce transferați date din HTML în fișierul TypeScript, puteți utiliza datele pentru a finaliza o anumită logică de afaceri. Un exemplu de scenariu ar fi dacă ați dori să verificați dacă numele introdus într-un câmp de intrare exista deja.
Cum puteți utiliza legarea în două sensuri?
Legarea bidirecțională în aplicațiile Angular este de obicei setată în .html fișier, folosind fișierul ngModel directivă. Legarea bidirecțională într-un formular de intrare poate arăta cam așa:
<intrare
tip="e-mail"
id="e-mail"
nume="e-mail"
substituent="[email protected]"
[(ngModel)]="Adresa de e-mail"
/>În .ts dosar, the Adresa de e-mail variabila este legată de adresa de e-mail din formular.
adresa de e-mail: String = ''; Cum să configurați un exemplu de formular într-o aplicație Angular
Prin construirea unei aplicații de bază, puteți utiliza legarea bidirecțională pentru a verifica dacă există deja un potențial nume de utilizator.
- Creeaza o noua aplicație Angular.
- Rulați ng genera componentă comandă pentru a crea o nouă componentă. Aici veți stoca formularul.
generează componenta nume de utilizator-verificator-form - Înlocuiți tot codul din dvs app.component.html fișier cu următoarele etichete:
<app-username-checker-form></app-username-checker-form> - Adăugați următorul CSS în noile dvs. componente .css dosar, situat la username-checker-form.component.css, pentru a stila forma:
.container {
display: flex;
text-align: centru;
justificare-conținut: centru;
alinierea elementelor: centru;
inaltime: 100vh;
}.card {
latime: 50%;
culoare de fundal: peachpuff;
hotar-raza: 1rem;
captuseala: 1rem;
}intrare {
frontieră: 3px solid #1a659e;
chenar-rază: 5px;
înălțime: 50px;
înălțimea liniei: normală;
culoare: #1a659e;
afisare: bloc;
latime: 100%;
dimensionare cutie: chenar-cutie;
utilizator-Selectați: auto;
dimensiunea fontului: 16px;
umplutură: 0 6px;
padding-stânga: 12px;
}intrare:concentrare {
frontieră: 3px solid #004e89;
}.btn {
afisare: bloc;
contur: 0;
cursor: pointer;
frontieră: 2px solid #1a659e;
chenar-rază: 3px;
culoare: #fff;
fundal: #1a659e;
dimensiunea fontului: 20px;
greutate font: 600;
înălțimea liniei: 28px;
umplutură: 12px 20px;
latime: 100%;
margine-top: 1rem;
}.btn:planare {
fundal: #004e89;
frontieră: #004e89;
}.succes {
culoare: #14ae83;
}.eroare {
culoare: #fd536d;
} - Adăugați următorul CSS în src/styles.css pentru a seta familia de fonturi, fundalul și culorile textului pentru aplicația generală:
@import URL("https://fonts.googleapis.com/css2?family=Poppins: wght@300;400&afisare=schimbare");corp {
familie de fonturi: "Poppins";
culoare de fundal: papayawhip;
culoare: #1a659e;
} - Înlocuiți codul în username-checker-form.component.html, pentru a adăuga formularul de verificare a numelui de utilizator:
<div class="recipient">
<div class="card">
<h1> Verificator nume de utilizator </h1><formă>
<intrare
tip="text"
id="nume de utilizator"
nume="nume de utilizator"
substituent="Va rugam sa introduceti un nume de utilizator"
/>
<clasa de buton="btn"> Salvați </button>
</form></div>
</div> - Rulați aplicația folosind comanda ng serve din terminal.
ng servi - Vizualizați aplicația dvs. la http://localhost: 4200/.
Trimiterea datelor între fișierele HTML și TypeScript
Utilizați legarea bidirecțională pentru a trimite date către dvs .ts fișier și înapoi la .html fişier. Acest lucru este posibil cu utilizarea ngModel în formularul intrare Etichete.
- Importă FormsModule în aplicație.modul.ts fișier și adăugați-l la importurilor matrice:
import { FormsModule } din '@angular/forms';@NgModule({
//...
importuri: [
// alte importuri
FormsModule
],
//...
}) - Declara a nume de utilizator variabilă de clasă în .ts fişier, username-checker-form.component.ts:
nume de utilizator: șir = ''; - În username-checker-form.component.html, adăuga [(ngModel)] cu nume de utilizator variabilă în eticheta de intrare. Acest lucru permite legarea în două sensuri și orice lucru introdus în numele de utilizator al formularului este atribuit variabilei nume de utilizator din .ts fişier.
<intrare
tip="text"
id="nume de utilizator"
nume="nume de utilizator"
substituent="Va rugam sa introduceti un nume de utilizator"
[(ngModel)]="nume de utilizator"
/> - Pentru a testa acele date sunt trimise către .ts fișier, creați un Salvați() metoda in username-checker-form.component.ts. Când trimiteți formularul, aplicația va apela această funcție.
Salvați(): gol {
consolă.Buturuga(acest.nume de utilizator);
} - Adaugă ngSubmit directivă către
- Când faceți clic pe butonul Salvare, Salvați() funcția va imprima valoarea introdusă în câmpul de intrare în consolă. Puteți vizualiza consola în timpul rulării utilizând instrumentele de dezvoltare ale browserului. Dacă nu sunteți familiarizat cu browserul DevTools sau cu vizualizarea consolei, puteți afla mai multe despre cum să utilizați Chrome DevTools.
- Trimite nume de utilizator înapoi la .html fişier. Adăugați variabila nume de utilizator între paranteze la username-checker-form.component.html dosar, după
- În username-checker-form.component.ts, adăugați câteva variabile de clasă pentru a verifica dacă numele de utilizator există deja. Declara a nume de utilizator matrice cu câteva nume de utilizator luate și adăugați un mesaj șir care informează utilizatorul despre verificare. Variabila isValidUsername este adevărat dacă numele de utilizator introdus nu se află în matricea de nume de utilizator.
nume de utilizator: șir[] = [ 'bart', 'lisa', 'prăji', 'leela' ];
mesaj: șir = '';
isValidUsername: boolean = fals; - The Salvați() metoda ar trebui să verifice dacă numele de utilizator introdus este deja în matricea de nume de utilizator existentă sau nu. În funcție de rezultat, mesajul va fi setat în consecință.
Salvați(): gol {
dacă (acest.nume de utilizator != '') {
acest.isValidUsername = !acest.nume de utilizator.include(
acest.nume de utilizator.laLowerCase()
);dacă (acest.isValidUsername) {
acest.mesaj = „Noul tău nume de utilizator este „${acest.nume de utilizator}'`;
} altfel {
acest.mesaj = „Numele de utilizator”${acest.nume de utilizator}'a fost deja luat';
}
}
} - Completeaza username-checker-form.component.html fișier arătând dacă numele de utilizator introdus există sau nu. Adăugați un mesaj de eroare sub
etichete după formular. The isValidUsername variabila este utilă aici pentru a determina culoarea mesajului afișat.
<p *ngIf="nume de utilizator" [ngClass]="isValidUsername? 'succes': 'eroare'">
{{ mesaj }}
</p> - În browserul dvs. la gazdă locală: 4200, încercați să introduceți un nume de utilizator care există în matricea de nume de utilizator: Apoi, încercați să introduceți un nume de utilizator care nu.
Utilizarea legăturii bidirecționale pentru a trimite date atunci când dezvoltați o aplicație
Legarea în două sensuri este utilă pentru validare, verificări, calcule și multe altele. Permite componentelor să comunice și să partajeze date în timp real.
Puteți utiliza funcțiile de legare bidirecțională în diferite părți ale unei aplicații. Odată ce primiți datele de la utilizator, puteți executa logica de afaceri și puteți informa utilizatorul despre rezultate.
Uneori, ați dori să stocați datele utilizatorului într-o bază de date. Puteți explora diferite tipuri de furnizori de baze de date pe care îi puteți utiliza, inclusiv baza de date Firebase NoSQL.
