Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
Mit der bidirektionalen Bindung können Ihre Komponenten Daten gemeinsam nutzen, Ereignisse verarbeiten und Werte in Echtzeit aktualisieren.
Die bidirektionale Bindung ermöglicht es Benutzern, Daten aus der HTML-Datei einzugeben und an die TypeScript-Datei und zurück zu senden. Dies ist nützlich für die Eingabevalidierung, Manipulation und mehr.
Nachdem Sie Daten aus der HTML-Datei an die TypeScript-Datei übergeben haben, können Sie die Daten verwenden, um eine bestimmte Geschäftslogik zu vervollständigen. Ein Beispielszenario wäre, wenn Sie überprüfen möchten, ob der in ein Eingabefeld eingegebene Name bereits existiert.
Wie können Sie die Zwei-Wege-Bindung verwenden?
Die bidirektionale Bindung in Angular-Apps wird normalerweise in der eingestellt
.html Datei unter Verwendung der ngModel Richtlinie. Die Zwei-Wege-Bindung in einem Eingabeformular kann etwa so aussehen:<Eingang
Typ="Email"
id="Email"
name="Email"
Platzhalter="[email protected]"
[(ngModel)]="E-Mail-Addresse"
/>Im .ts Datei, die E-Mail-Addresse Variable wird an die emailAddress aus dem Formular gebunden.
E-Mail-Adresse: Zeichenfolge = ''; So richten Sie ein Beispielformular in einer Angular-App ein
Indem Sie eine Basis-App erstellen, können Sie mithilfe der Zwei-Wege-Bindung prüfen, ob ein potenzieller Benutzername bereits vorhanden ist.
- Ein... kreieren neue Angular-App.
- Führen Sie die aus ng-Komponente generieren Befehl zum Erstellen einer neuen Komponente. Hier speichern Sie das Formular.
ng generiert die Komponente username-checker-form - Ersetzen Sie den gesamten Code in Ihrem app.component.html Datei mit den folgenden Tags:
<app-username-checker-form></app-username-checker-form> - Fügen Sie das folgende CSS in Ihre neue Komponente ein .css Datei, befindet sich unter username-checker-form.component.css, um das Formular zu formatieren:
.Container {
Anzeige: Flex;
Textausrichtung: Mitte;
justify-content: center;
Ausrichtungselemente: Mitte;
Höhe: 100vh;
}.Karte {
Breite: 50 %;
Hintergrundfarbe: peachpuff;
Grenzradius: 1rem;
Polsterung: 1rem;
}Eingabe {
Grenze: 3px fest #1a659e;
Randradius: 5px;
Höhe: 50px;
Zeilenhöhe: normal;
Farbe: #1a659e;
Bildschirmsperre;
Breite: 100 %;
Box-Größe: Border-Box;
Benutzer-wählen: Auto;
Schriftgröße: 16px;
Polsterung: 0 6px;
Polsterung links: 12px;
}Eingang:Fokus {
Grenze: 3px fest #004e89;
}.btn {
Bildschirmsperre;
Umriss: 0;
Cursor: Zeiger;
Grenze: 2px fest #1a659e;
Randradius: 3px;
Farbe: #F f f;
Hintergrund: #1a659e;
Schriftgröße: 20px;
Schriftstärke: 600;
Zeilenhöhe: 28px;
Polsterung: 12px 20px;
Breite: 100 %;
Rand-oben: 1rem;
}.btn:schweben {
Hintergrund: #004e89;
Grenze: #004e89;
}.Erfolg {
Farbe: #14ae83;
}.Fehler {
Farbe: #fd536d;
} - Fügen Sie das folgende CSS hinzu src/styles.css So legen Sie die Schriftfamilie, den Hintergrund und die Textfarben der gesamten App fest:
@Import-URL("https://fonts.googleapis.com/css2?family=Poppins: wight@300;400&anzeigen=tauschen");Körper {
Schriftfamilie: "Poppins";
Hintergrundfarbe: Papayawhip;
Farbe: #1a659e;
} - Ersetzen Sie den Code in username-checker-form.component.html, um das Formular zur Überprüfung des Benutzernamens hinzuzufügen:
<div-Klasse="Container">
<div-Klasse="Karte">
<h1> Benutzernamen-Checker </h1><form>
<Eingang
Typ="Text"
id="Nutzername"
name="Nutzername"
Platzhalter="Bitte geben Sie einen Benutzernamen ein"
/>
<Schaltfläche Klasse="btn"> Speichern </button>
</form></div>
</div> - Führen Sie Ihre App mit dem Befehl ng serve im Terminal aus.
ng dienen - Sehen Sie sich Ihre Bewerbung an unter http://localhost: 4200/.
Senden von Daten zwischen den HTML- und TypeScript-Dateien
Verwenden Sie die bidirektionale Bindung, um Daten an Ihre zu senden .ts Datei und zurück zur .html Datei. Dies ist möglich mit der Verwendung von ngModel in den Formularen Eingang Stichworte.
- Importieren Sie die FormsModule in die app.module.ts Datei, und fügen Sie sie der Importe Array:
importieren { Formularmodul } aus '@eckig/formen';@NgModul({
//...
Importe: [
// sonstige Importe
FormsModule
],
//...
}) - Erklären Sie a Nutzername Klassenvariable in der .ts Datei, username-checker-form.component.ts:
Benutzername: Zeichenkette = ''; - In username-checker-form.component.html, hinzufügen [(ngModel)] mit dem Nutzername Variable im Input-Tag. Dies ermöglicht eine bidirektionale Bindung, und alles, was in die Benutzernameneingabe des Formulars eingegeben wird, wird der Benutzernamenvariablen in der zugewiesen .ts Datei.
<Eingang
Typ="Text"
id="Nutzername"
name="Nutzername"
Platzhalter="Bitte geben Sie einen Benutzernamen ein"
[(ngModel)]="Nutzername"
/> - Um zu testen, dass Daten an die gesendet werden .ts Datei, erstelle eine speichern() Methode ein username-checker-form.component.ts. Wenn Sie das Formular absenden, ruft die Anwendung diese Funktion auf.
speichern(): Leere {
Konsole.Protokoll(Das.Nutzername);
} - Ergänzen Sie die ngSenden Richtlinie an die
- Wenn Sie auf die Schaltfläche Speichern klicken, wird die speichern() Die Funktion gibt den in das Eingabefeld eingegebenen Wert an die Konsole aus. Sie können die Konsole zur Laufzeit mit den Entwicklertools des Browsers anzeigen. Wenn Sie mit den Browser-DevTools oder dem Anzeigen der Konsole nicht vertraut sind, können Sie mehr darüber erfahren wie man Chrome DevTools verwendet.
- Sende das Nutzername zurück zum .html Datei. Fügen Sie die Benutzername-Variable zwischen geschweiften Klammern zu der hinzu username-checker-form.component.html Datei, nach der
- In username-checker-form.component.ts, fügen Sie einige Klassenvariablen hinzu, um zu prüfen, ob der Benutzername bereits existiert. Erklären Sie a Benutzernamen Array mit einigen vergebenen Benutzernamen und fügen Sie a hinzu Nachricht Zeichenfolge, die den Benutzer über die Überprüfung informiert. Die Variable ist gültiger Benutzername ist wahr, wenn der eingegebene Benutzername nicht im Array usernames enthalten ist.
Benutzernamen: string[] = [ 'Bart', 'Lisa', 'braten', 'Leela' ];
Nachricht: Zeichenkette = '';
isValidBenutzername: boolesch = FALSCH; - Der speichern() -Methode sollte prüfen, ob der eingegebene Benutzername bereits im vorhandenen Benutzernamen-Array enthalten ist oder nicht. Je nach Ergebnis wird die Meldung entsprechend gesetzt.
speichern(): Leere {
if (dieser.benutzername != '') {
Das.isValidBenutzername = !Das.usernames.includes(
Das.Nutzername.toLowerCase()
);Wenn (Das.isValidBenutzername) {
Das.nachricht = `Ihr neuer Benutzername ist '${Das.Nutzername}'`;
} anders {
Das.nachricht = `Der Benutzername '${Das.Nutzername}„ist bereits vergeben“.;
}
}
} - Vervollständigen Sie die username-checker-form.component.html Datei, indem angezeigt wird, ob der eingegebene Benutzername existiert oder nicht. Fügen Sie unterhalb der eine Fehlermeldung hinzu
Tags nach dem Formular. Der ist gültiger Benutzername Variable ist hier hilfreich, um die Farbe der angezeigten Meldung zu bestimmen.
<p *ngIf="Nutzername" [ngClass]="ist gültiger Benutzername? 'Erfolg': 'Fehler'">
{{ Nachricht }}
</P> - In Ihrem Browser unter lokaler Host: 4200, versuchen Sie, einen Benutzernamen einzugeben, der im Array usernames vorhanden ist: Versuchen Sie dann, einen Benutzernamen einzugeben, der dies nicht tut.
Verwenden der bidirektionalen Bindung zum Senden von Daten bei der Entwicklung einer Anwendung
Die bidirektionale Bindung ist nützlich für Validierungen, Prüfungen, Berechnungen und mehr. Es ermöglicht Komponenten, Daten in Echtzeit zu kommunizieren und auszutauschen.
Sie können Funktionen der bidirektionalen Bindung in verschiedenen Teilen einer App verwenden. Sobald Sie die Daten vom Benutzer erhalten haben, können Sie die Geschäftslogik ausführen und den Benutzer über die Ergebnisse informieren.
Manchmal möchten Sie die Daten des Benutzers in einer Datenbank speichern. Sie können verschiedene Arten von Datenbankanbietern erkunden, die Sie verwenden können, einschließlich der Firebase NoSQL-Datenbank.