在Angular应用开发中组件可以说是随處可见的。本篇文章将介绍几种常见的组件通讯场景也就是让两个或多个组件之间交互的方法。
根据数据的传递方向分为父组件向子組件传递、子组件向父组件传递及通过服务传递三种交互方法。
子组件通过定义输入属性然后父组件在引用子组件的时候通过这些输入屬性向子组件传递数据,子组件可通过setter
或ngOnChanges()
来截听输入属性值的变化
子组件通过@Input()
定义输入属性paramOne
和paramTwo
(属性值可以为任意数据类型)
父组件在其模板中通过选择器demo-child
引用子组件DemoChildComponent
,并通过子组件的两个输入属性paramOne
和paramTwo
向子组件传递数据最后在子组件的模板中就显示传递给paramOne的数据
和传递給paramTwo的数据
这两行文本。
在实际应用中我们往往需要在某个输入属性值发生变化的时候做相应的操作,那么此時我们需要用到输入属性的 setter 来截听输入属性值的变化
上面的代码中,我们定义了一个CallService服务在其内定义了info属性,后面将分别在父子组件通过修改这个属性的值达到父子组件互相传递数据的目的
此时,通过父组件改变info按钮
或子组件改变info按钮
在父组件或子组件中改变CallService服务的info屬性值然后在页面可看到改变之后对应的info属性值。
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。