理解angular2.0组件通讯

angular2.0项目中时常会涉及到”组件和组件之间进行通信”。首先，组件之间的通讯是两个组件有一定的关系，常常是父子关系。对于父组件和子组件，就存在下面的三种主要关系流

• 父组件传入子组件
• 子组件传出父组件
• 子组件和父组件双向通讯，也就是双向传输

---

1. 父组件传入子组件

通过 @Input() 装饰属性，使得父组件可以将值传入子组件

// 子组件  import { Component } from '@angular/core';  @Component({    selector: 'children-component',    template: `    <h1>标题为: {{title}}</h1>    <p>详情为: {{descript}}</p>    <section>内容为: {{content}}</section>    `  })  export class ChildrenComponent {    //@Input()是装饰器，表示为该属性为“输入型”    @Input() title:string;    @Input('desc') descript:string;    _content: string;    @Input()    set content(content: string) {      // 可以在这里处理 从父组件传进来的数据      this._content = "这是从父组件传进来的内容：" + content ;    }    get content() { return this._content; }  }

1. 子组件ChildrenComponent中定义的两个属性title和descript，并且用@Input()装饰器进行装，这样就使得这两个属性可以在父组件的模版中传入值了。
2. 子组件还定义了一个content属性，还有该属性的get和set函数，同时使用@Input()进行装饰。这样子组件就可以截取从父组件传进的数据，可以在set中处理数据。当读取属性值时会调用get函数,当设置属性值时会调用set函数，所以可以截取并处理获取的数据。

// 父组件  import { Component } from '@angular/core';  @Component({    selector: 'parent-component',    template: `    /* 给子组件的输入属性传值只需要在子组件的属性名字外加上[] ,然后直接赋值即可 */    <children-component [title]="父组件title" [desc]="desc">    </children-component>    `  })  export class ParentComponent {    desc:string = "父组件desc";  }

---

尽请期待后篇