1. 父组件向子组件传递信息

使用@Input

子组件的属性用 @Input 进行修饰，在父组件的模板中绑定变量

例子：

import { Component, OnInit, Input } from '@angular/core';@Component({selector: 'my-input',template: `<h1>I am your father!</h1><p>{{content}}</p><input-child [content]="content"></input-child>`
})export class InputComponent implements OnInit {content: string = 'May the force be with you';ngOnInit() { }
}@Component({selector: 'input-child',template: `<h1>The skywalker.</h1><p>{{content}}</p>`
})
export class InputChildComponent {@Input() content: string = '';
}

效果：

使用 setter 拦截输入的属性

在子组件中做一些修改，添加两个私有字段：revertContent、_content，然后为 _content 添加 setter 和 getter

代码

@Component({selector: 'input-child',template: `<h1>The skywalker.</h1><p>{{content}}</p><p>{{revertContent}}</p>`
})
export class InputChildComponent {revertContent: string;_content: string = '';@Input() set content(str: string) {this._content = str;this.revertContent = str.split(' ').reverse().join(' ');}get content() {return this._content;}
}

效果：

使用 ngOnChanged 拦截输入的属性

首先要修改一下 import 内容：

import { Component, OnInit, Input, OnChanges, SimpleChange } from '@angular/core';

然后让子组件实现 OnChanges 接口的 ngOnchanges 方法，修改后的子组件如下：

@Component({selector: 'input-child',template: `<h1>The skywalker.</h1><p>{{content}}</p><p>{{revertContent}}</p>`
})
export class InputChildComponent implements OnChanges {revertContent: string = 'default content';_content: string = 'default content';@Input() set content(str: string) {this._content = str;}get content() {return this._content;}ngOnChanges(changes: { [propKey: string]: SimpleChange }) {if (changes['content'] !== undefined) {let value = <string>(changes['content'].currentValue);this.revertContent = value.split(' ').reverse().join(' ');this.revertContent = `revert "${value}" to "${this.revertContent}"`;}}
}

ngOnChanges 是一个生命周期钩子，下图指出了这个方法的调用时机。

效果：

2. 子组件向父组件传递消息

子组件使用 EventEmitter<TEvent>

子组件中声明一个 EventEmitter<TEvent> 属性，然后在父组件的模板中添加这个事件的监听器

代码：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';@Component({selector: 'event',template: `<h1>I'm your father.</h1><p>recived damage: {{damage}}</p><event-child (onAttacked)="onAttackedHandler($event)"></event-child>`
})export class EventComponent implements OnInit {damage: number = 0;onAttackedHandler(damage: number) {this.damage += damage;}ngOnInit() { }
}@Component({selector: 'event-child',template: `<h1>The SkyWalker.</h1><button (click)="attack()">Attack!</button><span>Damage: {{damage}} !</span>`
})
export class EventChildComponent {private baseDamage: number = 100;damage: number = 0;@Output() onAttacked = new EventEmitter<number>();attack() {this.damage = Math.random() * this.baseDamage;this.onAttacked.emit(this.damage);}
}

使用本地变量

在父组件模板中使用 #xxx 这样的本地变量绑定子组件，然后就可以在模板中直接使用子组件的属性作为数据源

@Component({selector: 'event',template: `<h1>I'm your father.</h1><p>recived damage: {{damage}}</p><p>last damage: {{child.damage}}</p><event-child #child (onAttacked)="onAttackedHandler($event)"></event-child>`
})
export class EventComponent implements OnInit {damage: number = 0;onAttackedHandler(damage: number) {this.damage += damage;}ngOnInit() { }
}

使用 @ViewChild

父组件中使用 @ViewChild 获取子组件的引用，然后使用方法同上

import { Component, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';@Component({selector: 'event-child',template: `<h1>The SkyWalker.</h1><button (click)="attack()">Attack!</button><span>Damage: {{damage}} !</span>`
})
export class EventChildComponent {private baseDamage: number = 100;damage: number = 0;@Output() onAttacked = new EventEmitter<number>();attack() {this.damage = Math.random() * this.baseDamage;this.onAttacked.emit(this.damage);}
}// 注意，这里我交换了父子组件的位置，现在父组件的定义放在了下面@Component({selector: 'event',template: `<h1>I'm your father.</h1><p>recived damage: {{damage}}</p><p>last damage: {{child.damage}}</p><event-child  (onAttacked)="onAttackedHandler($event)"></event-child>`
})
export class EventComponent implements OnInit {damage: number = 0;@ViewChild(EventChildComponent) child: EventChildComponent;onAttackedHandler(damage: number) {this.damage += damage;}ngOnInit() { }
}

终极大招——组件间使用 service 通信

首先让我们在文件的开头定义一个 AttackService：

import { Component, OnInit, Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Rx';@Injectable()
export class AttackService {// 用来产生数据流的数据源private damageSource = new Subject<number>();// 把数据流转换成 Observabledamage$ = this.damageSource.asObservable();attack(damage: number) {// 把伤害输入到数据流this.damageSource.next(damage);}
}

然后在父组件与子组件中订阅这个数据流：

@Component({selector: 'event-child',template: `<h1>The SkyWalker.</h1><button (click)="attack()">Attack!</button><span>Damage: {{damage}} !</span>`
})
export class EventChildComponent {private baseDamage: number = 100;damage: number = 0;constructor(private attackService: AttackService) {}attack() {this.damage = Math.random() * this.baseDamage;// 天行者调用 AttackService 产生伤害this.attackService.attack(this.damage);}
}// 注意，这里我交换了父子组件的位置，现在父组件的定义放在了下面@Component({selector: 'event',providers: [AttackService], // 向父组件注入 AttackService，这样，父组件与子组件就能共享一个单例的 servicetemplate: `<h1>I'm your father.</h1><p>recived damage: {{damage}}</p><p>last damage: {{lastDamage}}</p><event-child></event-child>`
})
export class EventComponent implements OnInit {damage: number = 0;lastDamage: number = 0;constructor(private attackService: AttackService) {// 父组件订阅来自天行者的伤害this.attackService.damage$.subscribe(damage => {this.lastDamage = damage;this.damage += damage;}, error => {console.log('error: ' + error);});}ngOnInit() { }
}

效果：

如果我们把 service 注册到根模块，那么，就可以在整个 app 中共享数据啦~