Detaillierte Erläuterung der Winkel-Zweiwegebindung

Inhaltsverzeichnis

Bidirektionales Bindungsprinzip
ngModel

Rendern

Benutzerdefinierte bidirektionale Bindungseigenschaften

Komponente-html
Komponenten-ts
Externe Verwendung
Rendern

Zusammenfassen

Bidirektionales Bindungsprinzip

Die bidirektionale Bindung kombiniert die Eigenschaftsbindung mit der Ereignisbindung.

Die bidirektionale Bindungssyntax von Angular ist eine Kombination aus eckigen Klammern und runden Klammern [()].

[] wird für die Eigenschaftenbindung und () für die Ereignisbindung verwendet.

Die Benennungsregel lautet [Eingabename] + Ändern.

Eigenschaftenbindung ( Input ) – Legt ein bestimmtes Elementattribut fest.
Ereignisbindung ( Output -output) – Lauscht auf Elementänderungsereignisse.

Daher gibt es ngModel und ngModelChange in der Form einer bidirektionalen Bindung, und Sie können auch die Eigenschaften der bidirektionalen Bindung anpassen.

ngModel

Zweiwege-Bindung an Formularelemente

importiere { Komponente, OnInit } von '@angular/core';
@Komponente({
  Selektor: ‚App-Bind‘,
  Vorlage: `
    <div>
      <div>Name: {{ name }}</div>
      <input Typ="Text" Stil="Breite: 300px;" nz-input Name="Name" [(ngModel)]="Name" Autovervollständigung="Aus">
    </div>
  `
})
Exportklasse BindComponent implementiert OnInit {
  Name = ";
  Konstruktor() { }
  ngOnInit(): void { }
}

Rendern

Benutzerdefinierte bidirektionale Bindungseigenschaften

Komponente-html

<div>
  <div>inner: {{ Wert }}</div>
  <input style="width: 300px;" nz-input (input)="beiInput(input.value)" #input autocomplete="aus">
</div>

Komponenten-ts

importiere { Komponente, EventEmitter, Eingabe, OnInit, Ausgabe } von '@angular/core';
@Komponente({
  Selektor: ‚app-inner‘,
  Vorlagen-URL: "./inner.component.html",
  styleUrls: ['./inner.component.scss']
})
Exportklasse InnerComponent implementiert OnInit {
  // Eingabeeigenschaften festlegen @Input() value!: string;
  // Ausgabeereignis festlegen @Output() valueChange: EventEmitter<string> = new EventEmitter();
  Konstruktor() { }
  ngOnInit(): void { }
  onInput(Wert: Zeichenfolge){
    // Ausgabeereignis auslösen – Daten ausgeben this.valueChange.emit(value);
  }
}

Externe Verwendung

importiere { Komponente, OnInit } von '@angular/core';
@Komponente({
  Selektor: ‚App-Outer‘,
  Vorlage: `
    <div>
      <div>Name: {{ name }}</div>
      <app-inner [(Wert)]="Name"></app-inner>
    </div>
  `
})
Exportklasse OuterComponent implementiert OnInit {
  Name = ";
  Konstruktor() { }
  ngOnInit(): void { }
}

Rendern

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:

Detaillierte Erläuterung zweier Methoden zur Implementierung der bidirektionalen Bindung benutzerdefinierter Komponenten in Angular
Lösen Sie das Problem, dass die bidirektionale Winkelbindung keine Auswirkung hat und das ng-Modell nicht normal angezeigt werden kann
Lösen Sie das Problem, dass [(ngModel)] bei der bidirektionalen Datenbindung in Angular2 nicht verwendet werden kann
AngularJS-Prinzip der bidirektionalen Datenbindung: Anwendung von $watch, $apply und $digest
Ein Beispiel für die Implementierung der bidirektionalen Datenbindung mit benutzerdefinierten Angular-Komponenten
Eine kurze Erläuterung des Prinzips der bidirektionalen Bindung in AngularJs (Datenbindungsmechanismus)

<<: Linux-Systemaufrufe für Betriebsdateien

>>: Detaillierte Erklärung zur Verwendung von MySQL, wobei