Kaj je dvosmerna vezava v Angular?

Dvosmerna vezava omogoča uporabnikom, da vnesejo podatke iz datoteke HTML in jih pošljejo v datoteko TypeScript in nazaj. To je uporabno za preverjanje vnosa, manipulacijo in drugo.

Ko posredujete podatke iz HTML-ja v datoteko TypeScript, jih lahko uporabite za dokončanje določene poslovne logike. Primer scenarija bi bil, če bi želeli preveriti, ali ime, vneseno v vnosno polje, že obstaja.

Kako lahko uporabite dvosmerno vezavo?

Dvosmerna vezava v aplikacijah Angular je običajno nastavljena v .html datoteko z uporabo ngModel direktiva. Dvosmerna vezava v vnosnem obrazcu je lahko videti nekako takole:

<vnos 
 vrsta="E-naslov"
 id="E-naslov"
 ime="E-naslov"
 placeholder="[email protected]"
 [(ngModel)]="email naslov"
/>

V .ts datoteka, the email naslov spremenljivka je vezana na emailAddress iz obrazca.

e-poštni naslov: niz = ''; 

Kako nastaviti primer obrazca v aplikaciji Angular

Če ustvarite osnovno aplikacijo, lahko uporabite dvosmerno vezavo, da preverite, ali potencialno uporabniško ime že obstaja.

1. Ustvariti nova aplikacija Angular.
2. Zaženite ng ustvari komponento ukaz za ustvarjanje nove komponente. Tukaj boste shranili obrazec.

   ng ustvari obrazec za preverjanje uporabniškega imena komponente

3. Zamenjajte vso kodo v svojem app.component.html datoteka z naslednjimi oznakami:

   <app-username-checker-obrazec></app-username-checker-form>

4. Dodajte naslednji CSS v svojo novo komponento .css datoteka, ki se nahaja na username-checker-form.component.css, za oblikovanje obrazca:

   .posoda {
    zaslon: flex;
    poravnava besedila: sredina;
    justify-content: center;
    align-items: center;
    višina: 100vh;
   }
   .kartica {
    širina: 50 %;
    barva ozadja: breskova barva;
    polmer obrobe: 1rem;
    polnilo: 1rem;
   }
   vnos {
    meja: 3px trdna #1a659e;
    polmer obrobe: 5px;
    višina: 50px;
    višina črte: normalna;
    barva: #1a659e;
    zaslon: blok;
    širina: 100 %;
    velikost škatle: border-box;
    uporabnik-izberite: avto;
    velikost pisave: 16px;
    oblazinjenje: 0 6px;
    oblazinjenje-levo: 12px;
   }
   vnos:fokus {
    meja: 3px trdna #004e89;
   }
   .btn {
    zaslon: blok;
    oris: 0;
    kazalec: kazalec;
    meja: 2px trdna #1a659e;
    polmer obrobe: 3px;
    barva: #fff;
    ozadje: #1a659e;
    velikost pisave: 20px;
    teža pisave: 600;
    višina vrstice: 28px;
    oblazinjenje: 12px 20px;
    širina: 100 %;
    rob-zgoraj: 1rem;
   }
   .btn:lebdi {
    ozadje: #004e89;
    meja: #004e89;
   }
   .uspeh {
    barva: #14ae83;
   }
   .napaka {
    barva: #fd536d;
   }

5. Dodajte naslednji CSS v src/styles.css za nastavitev družine pisav, barv ozadja in besedila celotne aplikacije:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: teža@300;400&prikaz=zamenjava");
   telo {
    družina pisav: "Poppins";
    barva ozadja: papayawhip;
    barva: #1a659e;
   }

6. Zamenjajte kodo v username-checker-form.component.html, da dodate obrazec za preverjanje uporabniškega imena:

   <razred div="posoda">
   <razred div="kartica">
   <h1> Preverjevalnik uporabniškega imena </h1>
   <oblika>
   <vnos
    vrsta="besedilo"
    id="uporabniško ime"
    ime="uporabniško ime"
    placeholder="Vnesite uporabniško ime"
    />
   <razred gumba="btn"> Shrani </button>
   </form>
   </div>
   </div>

7. Zaženite svojo aplikacijo z ukazom ng serve v terminalu.

   ng služijo

8. Oglejte si svojo prijavo na http://localhost: 4200/.

Pošiljanje podatkov med datotekama HTML in TypeScript

Uporabite dvosmerno vezavo za pošiljanje podatkov na vašo .ts datoteko in nazaj na .html mapa. To je mogoče z uporabo ngModel v obrazcih vnos oznake.

1. Uvozite FormsModule v app.module.ts datoteko in jo dodajte v uvoz niz:

   uvoz {FormsModule} od '@angular/forms';
   @NgModule({
   //...
    uvoz: [
   // drugi uvozi
    FormsModule
    ],
   //...
   })

2. Razglasi a uporabniško ime spremenljivka razreda v .ts mapa, username-checker-form.component.ts:

   uporabniško ime: niz = '';

3. notri username-checker-form.component.html, dodaj [(ngModel)] z uporabniško ime spremenljivka v vhodni oznaki. To omogoča dvosmerno vezavo in vse, kar vnesete v vnos uporabniškega imena obrazca, se dodeli spremenljivki uporabniškega imena v .ts mapa.

   <vnos
    vrsta="besedilo"
    id="uporabniško ime"
    ime="uporabniško ime"
    placeholder="Vnesite uporabniško ime"
    [(ngModel)]="uporabniško ime"
   />

4. Da bi preizkusili, se ti podatki pošiljajo na .ts datoteko, ustvarite a shrani() metoda v username-checker-form.component.ts. Ko oddate obrazec, bo aplikacija poklicala to funkcijo.

   shrani(): praznina {
   konzola.log(to.uporabniško ime);
   }

5. Dodajte ngPošlji direktivo za
   oznake v username-checker-form.component.htmlin pokličite metodo save().

   <obrazec (ngSubmit)="shrani()">

6. Ko kliknete gumb Shrani, se shrani() bo na konzolo natisnila vrednost, vneseno v polje za vnos. Konzolo si lahko ogledate med izvajanjem z orodji za razvijalce brskalnika. Če niste seznanjeni z orodji za razvijalce brskalnika ali gledanjem konzole, lahko izveste več o kako uporabljati Chrome DevTools.
7. Pošlji uporabniško ime nazaj k .html mapa. Dodajte spremenljivko uporabniškega imena med zavitimi oklepaji v username-checker-form.component.html datoteka, po
   oznake. Za prikaz vrednosti, shranjene v spremenljivki uporabniškega imena, uporabite zavite oklepaje.

   <h2 *ngIf="uporabniško ime"> Vneseno uporabniško ime: {{ uporabniško ime }} </h2>

   V obrazcu naj bodo razvidni sočasno vneseni podatki.
8. notri username-checker-form.component.ts, dodajte nekaj spremenljivk razreda, da preverite, ali uporabniško ime že obstaja. Razglasi a uporabniška imena matriko z nekaj prevzetimi uporabniškimi imeni in dodajte a sporočilo niz, ki uporabnika obvesti o preverjanju. Spremenljivka isValidUsername velja, če vnesenega uporabniškega imena ni v matriki uporabniških imen.

   uporabniška imena: niz[] = [ 'bart', 'lisa', 'cvreti', 'leela' ];
   sporočilo: niz = '';
   isValidUsername: logično = lažno;

9. The shrani() metoda mora preveriti, ali je vneseno uporabniško ime že v obstoječi matriki uporabniških imen ali ne. Glede na rezultat bo sporočilo ustrezno nastavljeno.

   shrani(): praznina {
    če (to.uporabniško ime != '') {
   to.isValidUsername = !to.uporabniška imena.vključuje(
   to.uporabniško ime.toLowerCase()
    );
   če (to.isValidUsername) {
   to.message = `Vaše novo uporabniško ime je '${to.uporabniško ime}'`;
    } drugače {
   to.message = `Uporabniško ime'${to.uporabniško ime}'je že zasedeno';
    }
    }
   }

10. Dokončaj username-checker-form.component.html datoteko tako, da prikaže, ali vneseno uporabniško ime obstaja ali ne. Dodajte sporočilo o napaki pod

    oznake za obrazcem. The isValidUsername spremenljivka je tukaj v pomoč pri določanju barve prikazanega sporočila.

    <p *ngIf="uporabniško ime" [ngClass]="isValidUsername? 'uspeh': 'napaka'">
     {{ sporočilo }}
    </str>

11. V vašem brskalniku na lokalni gostitelj: 4200poskusite vnesti uporabniško ime, ki obstaja v matriki uporabniških imen: Nato poskusite vnesti uporabniško ime, ki ga ni.

Uporaba dvosmerne vezave za pošiljanje podatkov pri razvoju aplikacije

Dvosmerna vezava je uporabna za validacijo, preverjanja, izračune in drugo. Komponentam omogoča komunikacijo in izmenjavo podatkov v realnem času.

Funkcije dvosmerne vezave lahko uporabite v različnih delih aplikacije. Ko prejmete podatke od uporabnika, lahko izvedete poslovno logiko in uporabnika obvestite o rezultatih.

Včasih bi želeli podatke uporabnika shraniti v bazo podatkov. Raziščete lahko različne vrste ponudnikov baz podatkov, ki jih lahko uporabite, vključno z bazo podatkov Firebase NoSQL.