带你了解Angular10中的双向绑定

前面我们了解了属性绑定、事件绑定以及输入和输出的使用，是时候了解双向绑定了。本节，我们将利用@Input()和@Output()来了解下双向绑定。【相关教程推荐：《angular教程》】

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

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

一、普通组件的双向绑定

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

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

// src/app/components/sizer/sizer.COMponent.htMLdiv>
      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 EventEmitternumber>
    ();
  ....  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.htmlapp-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 EventEmitternumber>
    ();
  ....  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> 标签内：

!-- 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: 'appIput2'}
    ">
      p>
form 中input value is {
{
iptVal2}
}
    /p>
    /form>
    

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

总结：

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

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

更多编程相关知识，请访问：编程学习！！

以上就是带你了解angular10中的双向绑定的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！