Machen Sie sich mit der bidirektionalen Bindung in Angular10 vertraut

Der folgende Artikel führt Sie durch die Zwei-Wege-Bindung und wirft einen Blick auf die beiden Arten der Zwei-Wege-Bindung in Angular. Ich hoffe, er wird Ihnen hilfreich sein!

Wir haben etwas über Eigenschaftsbindung, Ereignisbindung und die Verwendung von Eingabe und Ausgabe gelernt. Es ist Zeit, etwas über bidirektionale Bindung zu lernen. In diesem Abschnitt verwenden wir @Input() und @Output(), um etwas über die bidirektionale Bindung zu lernen. [Verwandte Tutorial-Empfehlung: „@Input()和@Output()来了解下双向绑定。【相关教程推荐：《angular教程》】

定义：双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实，也就是对@Input()跟@Output()的一种简化)

双向绑定大致可以分成两种类型：

一、普通组件的双向绑定

这个类型的双向绑定可以发生在任何组件任何DOM元素上，下面我们通过一个实例来具体认识一下。

在src/app/components/下面创建一个sizer组件作为子组件：

// src/app/components/sizer/sizer.component.html
<div>
  <button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
  <button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  public size = 14;
  // ...
  dec() {
    this.size++;
  }
  inc() {
    this.size--;
  }
}

页面将是这样，且按钮功能实现：

但是，这并不是我们想要的结果，我们需要从父组件传入size，从而让sizer组件改变字体大小。并且，通过sizer组件的按钮点击事件，将改变后的size的值回传给父组件。

接下来我们将使用前面的知识来改造代码（也就是双向绑定的原理介绍）：

// src/app/app.component.html
// 下面的$event就是子组件传过来的值（必须是$event）
<app-sizer [size]="appFontSize" (onSizeChange)="appFontSize = $event"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/app.component.ts
...
export class AppComponent {
  appFontSize = 14;
}

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  // 创建输入属性size，为number或字符串类型
  @Input() size: number | string;
  // 创建自定义事件onSizeChange，需要一个number类型的参数
  @Output() onSizeChange = new EventEmitter<number>();
  ....
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(1);
  }
  resize(step: number) {
    // 设置字体大小为12～40之间的值
    this.size = Math.min(40, Math.max(12, +this.size + step));
    // 通过事件传值
    this.onSizeChange.emit(this.size);
  }
}

同样实现了我们想要的效果：

但是，这样是不是太麻烦了一点呢？下面，我们的双向绑定正式出场：

Angular 的双向绑定语法是方括号和圆括号的组合 [()]。[] 进行属性绑定，() 进行事件绑定。修改下面代码：

// src/app/app.component.html
<app-sizer [(size)]="appFontSize"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  @Input() size: number | string;
  // 修改事件名,********必须是：属性名 + Change 形式*********
  @Output() sizeChange = new EventEmitter<number>();
  ....
  resize(step: number) {
    this.size = Math.min(40, Math.max(12, +this.size + step));
    this.sizeChange.emit(this.size);
  }
}

会发现，功能没有受影响。

二、表单中的双向绑定[(ngModel)]

根据之前基本的双向绑定知识，[(ngModel)]语法可拆解为：

1.名为ngModel的输入属性

2.名为ngModelChange的输出属性

单独使用表单元素

首先需要引入FormsModule这个内置模块：

// src/app/app.module.ts 
import {FormsModule} from '@angular/forms';
...
@NgModule({
  // ...
  imports: [
    // ...
    FormsModule
  ],
  // ...
})

组件中使用：

<!-- src/app/app.component.html -->
<input type="text" [(ngModel)]="iptVal">
<p>input value is {{iptVal}}</p>

上面这行代码相当于：

<input [value]="iptVal" (input)="iptVal = $event.target.value" />

这其实很简单的，类似vue里面的写法。

在标签中使用

将代码放入<form></form>标签内：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

但是，我们会发现浏览器会报错：

报错意思说，在form表单中使用ngModel的话，我们需要给input添加一个name属性或者设置[ngModelOptions]="{standalone: true}"

修改代码：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" name="appIput2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

或者：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{standalone: true}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

或者：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{name: &#39;appIput2&#39;}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

在表单元素 中使用双向绑定就是这么简单了，注意引入FormsModule模块就行。

总结：

1、双向绑定的原理其实就是@Input()跟@Output()结合使用，需要注意语法是[(属性名)]=“父组件中一个属性名”，先绑定输入，再绑定输出；

2、在form表单中使用双向绑定，应首先引入FormsModule这个内置模块，然后在input元素上添加nameAngular-Tutorial“]

Definition: Die bidirektionale Bindung bietet Komponenten in der Anwendung die Möglichkeit, Daten auszutauschen. Verwenden Sie die bidirektionale Bindung, um Ereignisse abzuhören und Werte synchron zwischen übergeordneten und untergeordneten Komponenten zu aktualisieren. (Tatsächlich handelt es sich um eine Vereinfachung von @Input() und @Output())

Die bidirektionale Bindung kann grob in zwei Teile unterteilt werden Typen:

1 Zwei-Wege-Bindung gewöhnlicher Komponenten🎜🎜Diese Art der Zwei-Wege-Bindung kann auftreten jede Komponente Lassen Sie uns anhand eines Beispiels mehr über das DOM-Element erfahren. 🎜🎜Erstellen Sie eine sizer-Komponente als Unterkomponente unter src/app/components/: 🎜rrreee🎜Die Seite sieht folgendermaßen aus und die Schaltflächenfunktion ist implementiert: 🎜🎜 🎜🎜Das ist jedoch nicht das, was wir tun Als Ergebnis müssen wir size von der übergeordneten Komponente übergeben, damit die sizer-Komponente die Schriftgröße ändern kann. Und durch das Button-Click-Ereignis der Sizer-Komponente wird der geänderte size-Wert an die übergeordnete Komponente zurückgegeben. 🎜🎜🎜Als nächstes werden wir das Vorwissen nutzen, um den Code zu transformieren (d. h. eine Einführung in das Prinzip der bidirektionalen Bindung🎜): 🎜rrreeerrreee🎜 erzielt auch den gewünschten Effekt: 🎜🎜
Aber ist das nicht zu viel Aufwand? ? Als nächstes erscheint offiziell unsere bidirektionale Bindung: 🎜🎜Angulars bidirektionale Bindungssyntax ist eine Kombination aus eckigen Klammern und runden Klammern [()]🎜. [] wird für die Attributbindung verwendet, () wird für die Ereignisbindung verwendet🎜. Ändern Sie den folgenden Code: 🎜rrreeerrreee🎜 und Sie werden feststellen, dass die Funktion nicht beeinträchtigt ist. 🎜🎜2. Zwei-Wege-Bindung in der Form [(ngModel)]🎜🎜

🎜Basierend auf dem vorherigen Basic Zwei-Wege-Bindung Basierend auf bestimmten Kenntnissen kann die Syntax von [(ngModel)] wie folgt zerlegt werden: 🎜🎜🎜1.Das Eingabeattribut mit dem Namen ngModel🎜 🎜🎜2. Das Ausgabeattribut namens ngModelChange🎜🎜

🎜Nur das Formularelement verwenden🎜 span>🎜🎜 muss zuerst eingeführt werden FormsModule Dieses integrierte Modul: 🎜rrreee🎜 wird in der Komponente verwendet: 🎜rrreee🎜Die obige Codezeile entspricht: 🎜rrreee🎜Das ist tatsächlich so Sehr einfach, ähnlich der Schreibmethode in Vue. 🎜🎜Verwendung in Tags🎜🎜🎜Fügen Sie den Code in das <form></form>-Tag ein: 🎜rrreee🎜 Wir werden jedoch feststellen, dass der Browser einen Fehler meldet: 🎜🎜🎜
Die Fehlermeldung bedeutet, dass wir einen Namen hinzufügen müssen, wenn Sie <code>ngModel im form-Formular verwenden Attribut oder Einstellung [ngModelOptions]="{standalone: ​​​​true}"🎜🎜Ändern Sie den Code: 🎜rrreee🎜 oder: 🎜rrreee🎜oder: 🎜rrreee🎜 in der Form Es ist So einfach ist die bidirektionale Bindung in Elementen. Achten Sie einfach auf die Einführung des FormsModule-Moduls. 🎜

Zusammenfassung: 🎜

🎜1. Das Prinzip der bidirektionalen Bindung ist eigentlich @Input() und @Output( ) in Kombination verwendet, beachten Sie bitte, dass die Syntax [(Eigenschaftsname)] = „ein Attributname in der übergeordneten Komponente“ ist. Binden Sie zuerst die Eingabe und dann die Ausgabe 🎜🎜🎜🎜<em>2. Um die bidirektionale Bindung im Code-Formular</em> zu verwenden, sollten Sie zuerst das integrierte Modul FormsModule einführen und dann name hinzufügen. code> zum <code>input-Element hinzu. 🎜🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmieren lernen🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonMachen Sie sich mit der bidirektionalen Bindung in Angular10 vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!