下面本篇文章带大家了解一下双向绑定，看看angular中两种类型的双向绑定，希望对大家有所帮助！
前面我们了解了属性绑定、事件绑定以及输入和输出的使用，是时候了解双向绑定了。本节，我们将利用@Input()和@Output()来了解下双向绑定。【相关教程推荐：《angular教程》】
定义：双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实，也就是对@Input()跟@Output()的一种简化)
双向绑定大致可以分成两种类型：
一、普通组件的双向绑定
这个类型的双向绑定可以发生在任何组件任何DOM元素上，下面我们通过一个实例来具体认识一下。
在src/app/components/下面创建一个sizer组件作为子组件：
// src/app/components/sizer/sizer.component.html// 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表单中使用ngModel的话，我们需要给input添加一个name属性或者设置[ngModelOptions]=”{standalone: true}”
修改代码：
登录后复制登录后复制登录后复制登录后复制
或者：
登录后复制登录后复制登录后复制登录后复制
或者：
登录后复制登录后复制登录后复制登录后复制
在表单元素 中使用双向绑定就是这么简单了，注意引入FormsModule模块就行。
总结：
1、双向绑定的原理其实就是@Input()跟@Output()结合使用，需要注意语法是[(属性名)]=“父组件中一个属性名”，先绑定输入，再绑定输出；
2、在form表单中使用双向绑定，应首先引入FormsModule这个内置模块，然后在input元素上添加name。
更多编程相关知识，请访问：编程学习！！
以上就是带你了解Angular10中的双向绑定的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2707861.html
