Vous faire comprendre la liaison bidirectionnelle dans Angular10

L'article suivant vous présentera la liaison bidirectionnelle et examinera les deux types de liaison bidirectionnelle dans Angular. J'espère qu'il vous sera utile !

Nous avons découvert la liaison de propriétés, la liaison d'événements et l'utilisation des entrées et des sorties. Il est temps d'en apprendre davantage sur la liaison bidirectionnelle. Dans cette section, nous utiliserons @Input() et @Output() pour en savoir plus sur la liaison bidirectionnelle. [Recommandation de didacticiel connexe : "@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元素上添加nameTutoriel angulaire"]

Définition : La liaison bidirectionnelle permet aux composants de l'application de partager des données. Utilisez la liaison bidirectionnelle pour écouter les événements et mettre à jour les valeurs de manière synchrone entre les composants parents et enfants. (En fait, il s'agit d'une simplification de @Input() et @Output())

La liaison bidirectionnelle peut être grossièrement divisée en deux types：

1. Liaison bidirectionnelle de composants ordinaires🎜🎜Ce type de liaison bidirectionnelle peut se produire dans n'importe quel composant Sur l'élément DOM, regardons-le de plus près à travers un exemple. 🎜🎜Créez un composant sizer en tant que sous-composant sous src/app/components/ : 🎜rrreee🎜La page ressemblera à ceci, et la fonction du bouton est implémentée : 🎜🎜 🎜🎜Cependant, ce n'est pas ce que nous En conséquence, nous devons passer la valeur size du composant parent pour permettre au composant sizer de modifier la taille de la police. Et, via l'événement de clic sur le bouton du composant sizer, la valeur size modifiée est renvoyée au composant parent. 🎜🎜🎜Ensuite, nous utiliserons les connaissances précédentes pour transformer le code (c'est-à-dire une introduction au principe de la liaison bidirectionnelle🎜) : 🎜rrreeerrreee🎜 permet également d'obtenir l'effet souhaité : 🎜🎜
Cependant, n'est-ce pas trop compliqué ? Ensuite, notre liaison bidirectionnelle apparaît officiellement : 🎜🎜La syntaxe de liaison bidirectionnelle d'Angular est une combinaison de crochets et de crochets [()]🎜. [] est utilisé pour la liaison d'attributs, () est utilisé pour la liaison d'événements🎜. Modifiez le code suivant : 🎜rrreeerrreee🎜 et vous constaterez que la fonction n'est pas affectée. 🎜🎜2. Liaison bidirectionnelle sous la forme [(ngModel)]🎜🎜

🎜Basée sur la base précédente liaison bidirectionnelle Sur la base de certaines connaissances, la syntaxe de [(ngModel)] peut être décomposée en : 🎜🎜🎜1.L'attribut d'entrée nommé ngModel🎜 🎜🎜2. L'attribut de sortie nommé ngModelChange🎜🎜

🎜Utiliser l'élément de formulaire seul🎜 span>🎜🎜 doit d'abord être introduit FormsModule Ce module intégré : 🎜rrreee🎜 est utilisé dans le composant : 🎜rrreee🎜La ligne de code ci-dessus est équivalente à : 🎜rrreee🎜C'est en fait très simple, similaire à la méthode d'écriture dans vue. 🎜🎜Utiliser dans les balises🎜🎜🎜Mettez le code à l'intérieur de la balise <form></form> : 🎜rrreee🎜 Cependant, nous constaterons que le navigateur signalera une erreur : 🎜🎜🎜
Le message d'erreur signifie que si vous utilisez ngModel dans le formulaire form, nous devons ajouter un nom attribut ou paramètre [ngModelOptions]="{standalone: ​​​​true}"🎜🎜Modifiez le code : 🎜rrreee🎜 ou : 🎜rrreee🎜ou : 🎜rrreee🎜 sous la forme C'est c'est aussi simple à utiliser que la liaison bidirectionnelle dans les éléments. Faites simplement attention à l'introduction du module FormsModule. 🎜

Résumé : 🎜

🎜1. Le principe de la liaison bidirectionnelle est en fait @Input() et @Output(. ) utilisé en combinaison, veuillez noter que la syntaxe est [(property name)] = "un nom d'attribut dans le composant parent", liez d'abord l'entrée, puis liez la sortie 🎜🎜🎜🎜<em>2. Dans form</em>, vous devez d'abord introduire le module intégré FormsModule, puis ajouter name code> à l'élément <code>input. 🎜🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Apprendre la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!