爆炸的球
本文介绍了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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
