后端学 Angular 2 —— 组件间通信

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>();
    // 把数据流转换成 Observable
    damage$ = 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，这样，父组件与子组件就能共享一个单例的 service
    template: `
    <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 中共享数据啦~