Angular2 组件间通过@Input @Output通讯示例
更新时间：2017年08月24日 16:09:37 作者：冰冻鱼
本篇文章主要介绍了Angular2 组件间通过@Input @Output通讯示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了Angular2 组件间通过@Input @Output通讯示例，分享给大家，具体如下：
父组件传给子组件：
子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。
子组件：
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
上面的代码设置了两个可供父组件传入的属性:title和name,当设置name属性时，set name(name:string)方法会执行,如果不需要处理setter，那么用title的形式，一行代码声明即可.
父组件调用:
<app-header [title]="title" name="姓名"></app-header>
调用方法有两种，属性名用中括号包围的title，值title是父组件中的对象名，而name没有用中括号，后面的值就是传给子组件的字符串。当然，不用中括号，也可以用{{name}}传对象的值。
如果要监听传入属性值的变化，可以在子组件实现OnChanges（@angular/core中）接口：
export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
}
SimpleChanges 是一个用属性名作key的数组，通过属性名取出对象，对象里包含该属性变化前(previousValue)后(currentValue)的值。
父组件监听子组件变化
子组件通过@Output()暴露EventEmitter，父组件在声明子组件时增加EventEmitter的回调方法，子组件在需要的时候弹射事件，父组件的回调方法里就能收到。
子组件：
export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
//声明事件发射器
@Output() checkEmitter=new EventEmitter<boolean>();
//用于绑定checkbox的checked属性
isChecked=true;
toggle() {
this.isChecked=!this.isChecked;
//发射事件
this.checkEmitter.emit(this.isChecked);
}
}
子组件模板:
<p>
{{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>
父组件中声明:
复制代码 代码如下:
<app-header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>
父组件事件回调接收:
export class AppComponent implements AfterViewInit{
ngAfterViewInit() {
}
onCheckedChange(isChecked:boolean) {
console.log("checkbox选中状态："+isChecked);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下2015-01-01
Angular 主要分为八大构造块（也就是八个核心概念）：模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下2017-06-06
这篇文章主要介绍了AngularJS指令用法,较为详细的分析了AngularJS指令的功能、用法及自定义指令的相关实现技巧,需要的朋友可以参考下2016-11-11
Angular.js实现获取验证码倒计时60秒按钮的简单方法
最近做项目的时候又遇到了验证码倒计时的需求，发现这个功能还是挺实用的，所以就想着总结一下，下面这篇文章主要给大家介绍了关于利用Angular.js如何实现获取验证码倒计时按钮的简单方法，需要的朋友可以参考借鉴，下面来一起看看吧。2017-10-10
下面小编就为大家带来一篇angularjs中的$eval方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章主要介绍了详解AngularJS跨页面传值（ui-router），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本篇文章主要介绍了angularJs中datatable实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
这篇文章主要介绍了Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码),需要的朋友可以参考下2017-10-10
这篇文章主要介绍了AngularJS 控制器 controller的详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
本篇文章主要介绍了Angular实现响应式表单，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论