带你了解Angular10中的双向绑定

苏承栈

2026-09-23 • 👁 0人浏览过

下面本篇文章带大家了解一下双向绑定，看看 angular 中两种类型的双向绑定，希望对大家有所帮助！前面我们了解了属性绑定、事件绑定以及输入和输出的使用，是时候了解双向绑定了。本节，我们将利用

@Input()

和

@Output()

来了解下双向绑定。【相关教程推荐：《 angular教程》】定义：双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实，也就是对

@Input()

跟

@Output()

的一种简化) 双向绑定大致可以分成两种类型：一、普通组件的双向绑定这个类型的双向绑定可以发生在任何组件任何

DOM

元素上，下面我们通过一个实例来具体认识一下。在

src/app/components/

下面创建一个

sizer

组件作为子组件：

// src/app/components/sizer/sizer.component.html

  
  
  FontSize: {{size}}px

// 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）

子组件修改后的FontSize： {{appFontSize}}

// 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();
  ....
  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

子组件修改后的FontSize： {{appFontSize}}

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  @Input() size: number | string;
  // 修改事件名,********必须是：属性名 + Change 形式*********
  @Output() sizeChange = new EventEmitter();
  ....
  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
  ],
  // ...
})

组件中使用：



input value is {{iptVal}}

上面这行代码相当于：

这其实很简单的，类似vue里面的写法。在标签中使用将代码放入

标签内：



  
  form 中input value is {{iptVal2}}

但是，我们会发现浏览器会报错：报错意思说，在

form

表单中使用

ngModel

的话，我们需要给

input

添加一个

name

属性或者设置

[ngModelOptions]="{standalone: true}"

修改代码：



  
  form 中input value is {{iptVal2}}

或者：



  
  form 中input value is {{iptVal2}}

或者：



  
  form 中input value is {{iptVal2}}

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

FormsModule

模块就行。总结： 1、双向绑定的原理其实就是

@Input()

跟

@Output()

结合使用，需要注意语法是[(属性名)]=“父组件中一个属性名”，先绑定输入，再绑定输出； 2、在

form

表单中使用双向绑定，应首先引入

FormsModule

这个内置模块，然后在

input

元素上添加

name

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

相关文章