Angular2 组件间通过@Input @Output通讯示例
本文介绍了Angular2组件间通过@Input@Output通讯示例,分享给大家,具体如下:
父组件传给子组件:
子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。
子组件:
@Input()title:string; _name:string=''; @Input()setname(name:string){ this._name=(name&&name.trim())||''; }
上面的代码设置了两个可供父组件传入的属性:title和name,当设置name属性时,setname(name:string)方法会执行,如果不需要处理setter,那么用title的形式,一行代码声明即可.
父组件调用:
调用方法有两种,属性名用中括号包围的title,值title是父组件中的对象名,而name没有用中括号,后面的值就是传给子组件的字符串。当然,不用中括号,也可以用{{name}}传对象的值。
如果要监听传入属性值的变化,可以在子组件实现OnChanges(@angular/core中)接口:
exportclassHeaderComponentimplementsOnChanges{ ngOnChanges(changes:SimpleChanges):void{ console.log(changes['title']); } @Input()title:string; _name:string=''; @Input()setname(name:string){ this._name=(name&&name.trim())||''; } }
SimpleChanges是一个用属性名作key的数组,通过属性名取出对象,对象里包含该属性变化前(previousValue)后(currentValue)的值。
父组件监听子组件变化
子组件通过@Output()暴露EventEmitter,父组件在声明子组件时增加EventEmitter的回调方法,子组件在需要的时候弹射事件,父组件的回调方法里就能收到。
子组件:
exportclassHeaderComponentimplementsOnChanges{ ngOnChanges(changes:SimpleChanges):void{ console.log(changes['title']); } @Input()title:string; _name:string=''; @Input()setname(name:string){ this._name=(name&&name.trim())||''; } //声明事件发射器 @Output()checkEmitter=newEventEmitter(); //用于绑定checkbox的checked属性 isChecked=true; toggle(){ this.isChecked=!this.isChecked; //发射事件 this.checkEmitter.emit(this.isChecked); } }
子组件模板:
{{title}}
Checkbox
父组件中声明:
父组件事件回调接收:
exportclassAppComponentimplementsAfterViewInit{ ngAfterViewInit(){ } onCheckedChange(isChecked:boolean){ console.log("checkbox选中状态:"+isChecked); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。