Angular2组件间通过@Input @Output通讯示例 - 行业资讯 - 肥雀云

本文介绍了Angular2组件间通过@Input @Output通讯示例,分享给大家,具体如下:

<>强父组件传给子组件:
　　

子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。
　　

子组件:

　　　　　　@Input()标题:字符串; 　　_name:字符串="; 　　　　@Input()集名称(名称:字符串){ 　　this._name=(name&, name.trim ()) | |”; 　　} 　　　　之前　　　　

上面的代码设置了两个可供父组件传入的属性:标题和名字,当设置的名字属性时,集名称(名称:字符串)方法会执行,如果不需要处理setter,那么用标题的形式,一行代码声明即可。

父组件调用:

　　　　　　& lt; app-header[标题]="标题" name="姓名“祝辞& lt;/app-header> 　　　　

调用方法有两种,属性名用中括号包围的标题,标题值是父组件中的对象名,而名字没有用中括号,后面的值就是传给子组件的字符串。当然,不用中括号,也可以用{{名称}}传对象的值。

如果要监听传入属性值的变化,可以在子组件实现onchange (@angular/核心中)接口:

　　　　　　出口类HeaderComponent实现> 　　出口类HeaderComponent实现> 　　& lt; p> 　　{{标题}} 　　& lt;/p> 　　& lt; p> & lt;输入类型=案囱】颉泵?癱b”[(ngModel)]=巴瓿伞?单击)=扒谢?)”/在复选框& lt; br/祝辞& lt;/p> 　　之前　　　　

父组件中声明:

代码如下:
　　& lt; app-header[标题]="标题" name="{{名称}}”(checkEmitter)=皁nCheckedChange(事件)”祝辞& lt;/app-header>
　　
　　

父组件事件回调接收:

　　　　　　出口类AppComponent实现AfterViewInit { 　　ngAfterViewInit () { 　　　　} 　　onCheckedChange(完成:布尔){ 　　console.log(“复选框选中状态:“+完成); 　　} 　　} 　　之前　　　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。