angularjs双向绑定,angular双向绑定实现
下面这篇文章带你了解一下双向绑定，看看Angular中两种类型的双向绑定。希望对你有帮助！
我们学习了属性绑定、事件绑定以及输入和输出的使用。是时候学习一下双向绑定了。在本节中，我们将使用@Input()和@Output()来了解双向绑定。【相关教程推荐：《angular教程》】
定义：双向绑定为应用程序中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件，并在父组件和子组件之间同步更新的值。(其实是@Input()和@Output()的简化)
双向绑定大致可以分成两种类型：
一、普通组件的双向绑定
这种类型的双向绑定可以发生在任何组件的任何DOM元素上。我们通过一个例子具体看一下。
在src/app/components/下创建一个sizer组件作为子组件：
//src/app/components/sizer/sizer . component . html
差异
button class= BTN BTN-danger (click)= dec() title= small -/button
button class=btn btn-primary (单击)=inc() title=bigger /button
label[style . font-size . px]= size font size:{ { size } } px/label
/div
//src/app/components/sizer/sizer . component . ts
.
导出类SizerComponent实现OnInit {
公共尺寸=14；
//.
dec() {
this.size
}
公司(){
this . size-；
}
}页面会是这样的，按钮功能实现了：
然而，这并不是我们想要的结果。我们需要从父组件传入size，从而让sizer组件改变字体大小。并且，通过sizer组件的按钮点击事件，将改变后的size的值回传给父组件。。
接下来我们将使用前面的知识来转换代码(也就是双向绑定的原理介绍):
//src/app/app.component.html
//下面的$event是子组件传递的值(必须是$event)
app-sizer[size]= app fontsize (onsize change)= app fontsize=$ event /app-sizer
Div [style.font-size.px]=修改了“appfontsize”子组件的fontsize:{ { app fontsize } }/div
//src/app/app.component.ts
.
导出类AppComponent {
appFontSize=14
}//src/app/components/sizer/sizer . component . ts
.
导出类SizerComponent实现OnInit {
//创建输入属性大小，它是数字或字符串类型
@ Input()size:number string；
//创建自定义事件onSizeChange需要number类型的参数
@ Output()onsize change=new eventemiternumber()；
.
dec() {
this . resize(-1)；
}
公司(){
this . resize(1)；
}
调整大小(步长：数字){
//将字体大小设置为12到40之间的值
this.size=Math.min(40，Math.max(12，this.size步长))；
//通过事件传递值
this . onsize change . emit(this . size)；
}
}也达到了预期的效果：
但是是不是太麻烦了？下面，我们的双向绑定正式出现：
Angular的双向绑定语法是方括号和圆括号[()]的组合。[] 进行属性绑定，() 进行事件绑定。修改以下代码：
//src/app/app.component.html
app-sizer[(size)]= app fontsize /app-sizer
Div [style.font-size.px]=由 appfontsize 子组件修改的Fontsize:{ { app Fontsize } }/div//src/app/components/sizer/sizer . component . ts
.
导出类SizerComponent实现OnInit {
@ Input()size:number string；
//修改事件名称，* * * * * * *必须是：属性名称更改表单* * * * * * * *
@ Output()size change=new eventemiternumber()；
.
调整大小(步长：数字){
this.size=Math.min(40，Math.max(12，this.size步长))；
this . size change . emit(this . size)；
}
}你会发现功能不受影响。
二、表单中的双向绑定[(ngModel)]
单独使用表单元素
首先，我们需要介绍内置模块FormsModule:
//src/app/app.module.ts
从“@angular/forms”导入{ forms module }；
.
@NgModule({
//.
进口：[
//.
表单模块
],
//.
})用于组件：
！- src/app/app.component.html -
输入类型=text [(ngModel)]=iptVal
Pin值为{{IPTV al}}/p上面一行代码相当于：
input[value]= IPTV al (input)= IPTV al=$ event . target . value /这个其实很简单，类似于vue中的写法。
在标签中使用
将代码放在表单标签中：
！- src/app/app.component.html -
形式
输入类型=text [(ngModel)]=iptVal2
pform中的输入值为{ { IP val 2 } }/p
/表格但是，我们会发现浏览器会报错：
报错意思说，在形式表单中使用属性指令的话，我们需要给投入添加一个名字属性或者设置[ngModelOptions]= { standalone:true }
修改代码：
！- src/app/app.component.html -
形式
输入类型= text [(ng模型)]= IP tval 2 name= appi put 2
pform中输入值为{{iptVal2}}/p
/表单或者：
！- src/app/app.component.html -
形式
输入类型= text [(ng model)]= ipt val 2 [ngModelOptions]= { standalone:true }
pform中输入值为{{iptVal2}}/p
/表单或者：
！- src/app/app.component.html -
形式
输入类型= text [(ng model)]= ipt val 2 [ngModelOptions]= { name: appi put 2 }
pform中输入值为{{iptVal2}}/p
/表单在表单元素中使用双向绑定就是这么简单了，注意引入表单模块模块就行。
总结：
1、双向绑定的原理其实就是@Input()跟@Output()结合使用，需要注意语法是[(属性名)]=“父组件中一个属性名”，先绑定输入，再绑定输出；
2、在form表单中使用双向绑定，应首先引入FormsModule这个内置模块，然后在input元素上添加name。
更多编程相关知识，请访问：编程学习！以上就是带你了解Angular10中的双向绑定的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。