角自定义组件实现数据双向数据绑定的实例

  

学过角的同学都知道,输入框通过<代码> [(ngModel)] 实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的。

  

角中,我们常常需要通过方括号<代码>[]> ()实现组件间的交互:

  

角自定义组件实现数据双向数据绑定的实例

  

那么在<代码>[]和<代码>()的基础上,如何实现组件的双向数据绑定?

  

例子如下。

  

        & lt; !——testDataBinding.component.html祝辞      & lt; h2> childStatus: {{childStatus}} & lt;/h2>         //testDataBinding.component.ts      出口类TestDataBindingComponent实现>   & lt; !——app.component.html祝辞      & lt; test-binding [(childStatus)]=" parentStatus祝辞& lt;/test-binding>   & lt; h2> parentStatus: {{parentStatus}} & lt;/h2>         //app.component.ts      从“@angular进口{组件,OnInit}/核心”;   @ component ({   选择器:“我的程序”,   templateUrl:“。/app.component.html”,   styleUrls(“。/app.component.css”):   })   出口类AppComponent实现alt="角自定义组件实现数据双向数据绑定的实例">

  

事实证明,子组件值变化后,父组件的值也跟着变化;父组件值变化后子组件的值也跟着变了!

  

我们实现了双向绑定!

  

查看本文代码和效果,可点击<强>这里

  

以上这篇角自定义组件实现数据双向数据绑定的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

角自定义组件实现数据双向数据绑定的实例