Angular2 组件间通过@Input @Output通讯示例

2023-09-25 21:55:05 287

本文介绍了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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Angular2 组件间通过@Input @Output通讯示例

热门推荐

随机推荐