So implementieren Sie die bidirektionale Datenbindung in Angular-js-Tutorial-php.cn

So implementieren Sie die bidirektionale Datenbindung in Angular

亚连

Freigeben： 2018-06-21 16:58:11

Original

1456 Leute haben es durchsucht

Der unten stehende Herausgeber wird Ihnen ein Beispiel für die bidirektionale Datenbindung mit benutzerdefinierten Angular-Komponenten vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Editor und werfen wir einen Blick darauf.

Studenten, die Angular studiert haben, wissen alle, dass das Eingabefeld eine bidirektionale Datenbindung durch [(ngModel)] erreicht ? Die Antwort ist ja.

In Angular müssen wir häufig eckige Klammern []<code>[] und runde Klammern ()()Interaktion zwischen Komponenten realisieren:

Dann in []<code>[] und () die bidirektionale Datenbindung von Komponenten? ()

Beispiele sind wie folgt.

Unterkomponente:

<!--testDataBinding.component.html-->

<h1>childStatus: {{childStatus}}</h1>

Nach dem Login kopieren

rrree

Achten Sie hier auf die Schreibweise, das ist der Schlüssel, die erste Hälfte des Ausgabeattributs muss gleich sein Als Eingabeattribut kann das Eingabeattribut beliebig benannt werden. Wenn Ihr Eingabeattribut beispielsweise myData ist, muss das Ausgabeattribut myDataChange sein.

Übergeordnete Komponente:

//testDataBinding.component.ts

export class TestDataBindingComponent implements OnInit{
 @Input() childStatus;
 @Output() childStatusChange = new EventEmitter();
 ngOnInit(){
 setTimeout(()=>{
  this.childStatus = false;
  this.childStatusChange.emit(this.childStatus);
 },5000);
 }
}

Nach dem Login kopieren

rrree

In der übergeordneten Komponente initialisieren wir

parentStatus ist true<code>parentStatus und übergibt ihn an die untergeordnete Komponente TestDataBindingComponent<code>true. TestDataBindingComponent

In der untergeordneten Komponente setzen wir nach 5 Sekunden childStatus auf false<code>childStatus, um zu sehen, ob es an die übergeordnete Komponente übergeben werden kann. Nach weiteren 5 Sekunden setzen wir parentStatus<code>false in der übergeordneten Komponente auf  true<code>parentStatus, prüfen Sie, ob es an die untergeordnete Komponente übergeben werden kann. true

Es stellt sich heraus, dass sich nach der Änderung des Werts der untergeordneten Komponente auch der Wert der übergeordneten Komponente ändert Der Wert der untergeordneten Komponente ändert sich ebenfalls!

Wir haben eine Zwei-Wege-Bindung implementiert!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie das dynamische Laden von Histogrammen in AngularJS

So verwenden Sie den Bereich im Angular-Bereich

So implementieren Sie die Menüberechtigungssteuerung mithilfe von React

Detaillierte Erklärung, wie Requisiten Parameter in vue.js übergeben

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die bidirektionale Datenbindung in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!