Angular10中双向绑定的示例分析
这篇文章主要介绍了Angular10中双向绑定的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、雅安服务器托管、营销软件、网站建设、张家川回族自治网站维护、网站推广。
将利用@Input()和@Output()来了解下双向绑定。
定义：双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实，也就是对@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表单中使用ngModel的话，我们需要给input添加一个name属性或者设置[ngModelOptions]="{standalone: true}"
修改代码：
或者：
或者：
在表单元素 中使用双向绑定就是这么简单了，注意引入FormsModule模块就行。
感谢你能够认真阅读完这篇文章，希望小编分享的“Angular10中双向绑定的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
本文名称：Angular10中双向绑定的示例分析
当前链接：
http://bjjierui.cn/article/jieecc.html
