Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.
Dzięki dwukierunkowemu powiązaniu Twoje komponenty mogą udostępniać dane, obsługiwać zdarzenia i aktualizować wartości w czasie rzeczywistym.
Wiązanie dwukierunkowe umożliwia użytkownikom wprowadzanie danych z pliku HTML i wysyłanie ich do pliku TypeScript iz powrotem. Jest to przydatne do sprawdzania poprawności danych wejściowych, manipulowania nimi i nie tylko.
Po przekazaniu danych z kodu HTML do pliku TypeScript można ich użyć do wykonania określonej logiki biznesowej. Przykładowym scenariuszem byłoby sprawdzenie, czy nazwa wprowadzona w polu wejściowym już istnieje.
Jak korzystać z wiązania dwukierunkowego?
Wiązanie dwukierunkowe w aplikacjach Angular jest zwykle ustawiane w pliku .html plik, używając ngModel dyrektywa. Wiązanie dwukierunkowe w formularzu wejściowym może wyglądać mniej więcej tak:
<wejście
typ="e-mail"
identyfikator="e-mail"
imię="e-mail"
symbol zastępczy="przykład@przykład.com"
[(ngModel)]="Adres e-mail"
/>w ts plik, Adres e-mail zmienna jest powiązana z adresem e-mail z formularza.
Adres e-mail: Ciąg znaków = ''; Jak skonfigurować przykładowy formularz w aplikacji Angular
Tworząc podstawową aplikację, możesz użyć dwukierunkowego wiązania, aby sprawdzić, czy potencjalna nazwa użytkownika już istnieje.
- Stwórz nowa aplikacja Angulara.
- Uruchom generować komponent polecenie utworzenia nowego komponentu. Tutaj będziesz przechowywać formularz.
ng wygeneruj komponent username-checker-form - Zastąp cały kod w swoim aplikacja.komponent.html plik z następującymi tagami:
<app-username-checker-formularz></app-username-checker-form> - Dodaj następujący CSS do swojego nowego komponentu .css plik, znajdujący się pod adresem username-checker-form.component.css, aby stylizować formularz:
.pojemnik {
wyświetlacz: elastyczny;
wyrównanie tekstu: środek;
justify-content: środek;
elementy wyrównania: środek;
wysokość: 100vh;
}.karta {
szerokość: 50%;
kolor tła: brzoskwiniowy;
promień granicy: 1rem;
wyściółka: 1rem;
}wejście {
granica: 3piksele solidne #1a659e;
promień obramowania: 5px;
wysokość: 50 pikseli;
wysokość linii: normalna;
kolor: #1a659e;
Blok wyświetlacza;
szerokość: 100%;
rozmiar pudełka: ramka-pudełko;
użytkownik-wybierać: automatyczny;
rozmiar czcionki: 16px;
wypełnienie: 0 6px;
dopełnienie po lewej stronie: 12px;
}wejście:centrum {
granica: 3piksele solidne #004e89;
}.btn {
Blok wyświetlacza;
zarys: 0;
kursor: wskaźnik;
granica: 2piksele solidne #1a659e;
promień obramowania: 3px;
kolor: #ffff;
tło: #1a659e;
rozmiar czcionki: 20px;
grubość czcionki: 600;
wysokość linii: 28px;
wypełnienie: 12px 20px;
szerokość: 100%;
margines górny: 1rem;
}.btn:unosić się {
tło: #004e89;
granica: #004e89;
}.powodzenie {
kolor: #14ae83;
}.błąd {
kolor: #fd536d;
} - Dodaj następujący CSS do src/styles.css aby ustawić rodzinę czcionek, tło i kolory tekstu w całej aplikacji:
@adres URL importu ("https://fonts.googleapis.com/css2?family=Poppins: waga@300;400&wyświetlanie = zamiana");ciało {
rodzina czcionek: "Poppins";
kolor tła: papayawhip;
kolor: #1a659e;
} - Zastąp kod w formularz sprawdzania nazwy użytkownika.komponent.html, aby dodać formularz sprawdzania nazwy użytkownika:
<klasa div="pojemnik">
<klasa div="karta">
<h1> Sprawdzanie nazwy użytkownika </h1><formularz>
<wejście
typ="tekst"
identyfikator="nazwa użytkownika"
imię="nazwa użytkownika"
symbol zastępczy="Proszę, wpisz nazwę użytkownika"
/>
<klasa przycisku ="btn"> Ratować </button>
</form></div>
</div> - Uruchom swoją aplikację za pomocą polecenia ng serve w terminalu.
służyć - Zobacz swoją aplikację na http://localhost: 4200/.
Przesyłanie danych między plikami HTML i TypeScript
Użyj wiązania dwukierunkowego, aby wysłać dane do swojego ts plik i wróć do .html plik. Jest to możliwe za pomocą ngModel w formularzu wejście tagi.
- Importuj Moduł formularzy do aplikacja.moduł.ts plik i dodaj go do import szyk:
import { Moduł formularzy } z '@kątowy/formy';@NgModule({
//...
import: [
// inny import
Moduł formularzy
],
//...
}) - zadeklarować nazwa użytkownika zmienna klasy w ts plik, username-checker-form.component.ts:
nazwa użytkownika: ciąg znaków = ''; - W formularz sprawdzania nazwy użytkownika.komponent.html, dodać [(ngModel)] z nazwa użytkownika zmienna w tagu wejściowym. Umożliwia to dwukierunkowe wiązanie, a wszystko, co zostanie wpisane w polu nazwy użytkownika formularza, zostanie przypisane do zmiennej nazwy użytkownika w ts plik.
<wejście
typ="tekst"
identyfikator="nazwa użytkownika"
imię="nazwa użytkownika"
symbol zastępczy="Proszę, wpisz nazwę użytkownika"
[(ngModel)]="nazwa użytkownika"
/> - Aby przetestować, czy dane są wysyłane do ts plik, utwórz plik ratować() metoda w username-checker-form.component.ts. Po przesłaniu formularza aplikacja wywoła tę funkcję.
ratować(): próżnia {
konsola.dziennik(Ten.nazwa użytkownika);
} - Dodaj ngPrześlij dyrektywa do
- Po kliknięciu przycisku Zapisz, plik ratować() funkcja wydrukuje wartość wprowadzoną w polu wejściowym do konsoli. Możesz wyświetlić konsolę w czasie wykonywania, korzystając z narzędzi programistycznych przeglądarki. Jeśli nie jesteś zaznajomiony z DevTools w przeglądarce lub przeglądaniem konsoli, możesz dowiedzieć się więcej o jak korzystać z Chrome DevTools.
- Wysłać nazwa użytkownika powrót do .html plik. Dodaj zmienną username między nawiasami klamrowymi do pliku formularz sprawdzania nazwy użytkownika.komponent.html plik, po
- W username-checker-form.component.ts, dodaj kilka zmiennych klasy, aby sprawdzić, czy nazwa użytkownika już istnieje. zadeklarować nazwy użytkowników array z kilkoma pobranymi nazwami użytkowników i dodaj a wiadomość ciąg informujący użytkownika o sprawdzeniu. Zmienna isValidUsername ma wartość true, jeśli wprowadzonej nazwy użytkownika nie ma w tablicy usernames.
nazwy użytkowników: string[] = [ 'bart', 'Lisa', 'smażyć', 'lila' ];
wiadomość: ciąg znaków = '';
isValidNazwa użytkownika: logiczna = FAŁSZ; - The ratować() powinna sprawdzić, czy wprowadzona nazwa użytkownika znajduje się już w istniejącej tablicy nazw użytkowników, czy nie. W zależności od wyniku wiadomość zostanie odpowiednio ustawiona.
ratować(): próżnia {
if (to. nazwa użytkownika != '') {
Ten.isValidUsername = !Ten.usernames.includes(
Ten.nazwa użytkownika.na małe litery()
);Jeśli (Ten.isValidUsername) {
Tenwiadomość = `Twoja nowa nazwa użytkownika to '${Ten.nazwa użytkownika}'`;
} w przeciwnym razie {
Tenwiadomość = `Nazwa użytkownika'${Ten.nazwa użytkownika}'został już zajęty';
}
}
} - Ukończ formularz sprawdzania nazwy użytkownika.komponent.html plik, pokazując, czy wprowadzona nazwa użytkownika istnieje, czy nie. Dodaj komunikat o błędzie pod plikiem
tagi po formularzu. The isValidUsername pomocna jest tutaj zmienna do określenia koloru wyświetlanego komunikatu.
<p *ngJeżeli="nazwa użytkownika" [ngKlasa]="jestprawidłowa nazwa użytkownika? 'powodzenie': 'błąd'">
{{ wiadomość }}
</P> - W Twojej przeglądarce pod adresem lokalny host: 4200, spróbuj wprowadzić nazwę użytkownika, która istnieje w tablicy usernames: Następnie spróbuj wprowadzić nazwę użytkownika, która tego nie robi.
Używanie wiązania dwukierunkowego do wysyłania danych podczas opracowywania aplikacji
Wiązanie dwukierunkowe jest przydatne do walidacji, kontroli, obliczeń i nie tylko. Pozwala komponentom komunikować się i udostępniać dane w czasie rzeczywistym.
Możesz korzystać z funkcji wiązania dwukierunkowego w różnych częściach aplikacji. Po otrzymaniu danych od użytkownika można wykonać logikę biznesową i poinformować użytkownika o wynikach.
Czasami chcesz przechowywać dane użytkownika w bazie danych. Możesz zapoznać się z różnymi typami dostawców baz danych, z których możesz korzystać, w tym z bazą danych Firebase NoSQL.
