介绍
这期内容当中小编将会给大家带来有关怎么在Angular2中实现父子组件的通信,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<李> 通过输入型绑定把数据从父组件传到子组件(@Input装饰);子组件暴露一个EventEmitter属性(@Output装饰),当事件发生时,利用该属性排放向父组件发射事件。
<李> 父组件与子组件通过本地变量互动。(# var)
<李> 父组件调用@ViewChild。
<李> 父组件和子组件通过服务来通讯。
我在这里只总结,详细介绍3种我在项目中使用过的方法,看完本文大概能做到如下的效果:
<李>
使用一个输入属性的setter,以拦截父组件中值得变化。
<李> 通过ngOnchanges()来截听输入属性值的变化。
@Output:该数据绑定用于子组件向父组件传递数据和事件。
& lt; !——parent.component.html祝辞
& lt; div 比;
& lt; div 类=癱ard",比;
,& lt; div 类=癱ard-header"比;
父才能组件
,& lt;/div>
,& lt; div 类=癱ard-body"比;
& lt;才能h6 类=癱ard-title"在父组件& lt;/h6>
& lt;才能div 类=癴orm-group"比;
,,& lt; label 为=癷nput"在父组件输入:& lt;/label>
,,& lt; input 类型=皌ext"
,,,,,,类=癴orm-control"
,,,,,,id=癷nput"
,,,,,,占位符=癐nput something"
,,,,,,((ngModel))=皃arentPrint",
,,在
,,& lt; label 为=皁utput"在父组件输出:& lt;/label>
,,& lt; input 类型=皌ext"
,,,,,,类=癴orm-control"
,,,,,,id=皁utput"
,,,,,,占位符=癘utput something"
,,,,,,((ngModel))=癱ontentFromChild"
,,在
& lt;才能/div>
,& lt;/div>
& lt;/div>
& lt; app-child
,[fromParent]=皃arentPrint"
,(fromChild)=癴romChild(事件),
祝辞& lt;/app-child>
& lt;/div> & lt; !——child.component.html祝辞
& lt; div 类=癱ard",比;
,& lt; div 类=癱ard-header"比;
子才能组件
,& lt;/div>
,& lt; div 类=癱ard-body"比;
& lt;才能h6 类=癱ard-title"在子组件& lt;/h6>
& lt;才能div 类=癴orm-group"比;
,,& lt; label 为=癷nput"在子组件输入:& lt;/label>
,,& lt; input 类型=皌ext"
,,,,,,类=癴orm-control"
,,,,,,id=癷nput"
,,,,,,占位符=癐nput something"
,,,,,,((ngModel))=癱ontentFromChild"
,,在
,,& lt; label 为=皁utput"在子组件输出:& lt;/label>
,,& lt; input 类型=皌ext"
,,,,,,类=癴orm-control"
,,,,,,id=皁utput"
,,,,,,占位符=癘utput something"
,,,,,,((ngModel))=癴romParent"
,,在
& lt;才能/div>
& lt;才能button 类=癰tn btn-primary",(点击)=癱lickChild(),在输出方式& lt;/button>
,& lt;/div>
& lt;/div> 效果如下:(1)父组件输入,子组件可同步输出;2,子组件输入需要(3)点击按钮触发发射事件,将数据传送给父组件)。
//父组件
parentPrint:,,,,,,,,//ts中,声明一个变量
[(ngModel)]=皃arentPrint",,//html中,绑定变量,获取用户输入//html中,将数据传给子组件
& lt; app-child [fromParent]=皃arentPrint"祝辞& lt;/app-child>,//子组件
@Input (), fromParent;,,,,//ts中,用于直接接收从父组件获取的数据
[(ngModel)]=癴romParent",,//html中,用于显示数据
通过setter截听输入属性值的变化,在子组件中声明一个私有变量来获取父组件传递过来的数据,从而屏蔽上层获取下层信息。(简单一点就是不让父组件知道子组件用什么东西去接收传过来的数据)通过这种方法也可以获得同样的效果。
