Angular 2在两个组件之间发送数据

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [message]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>
  `,
})
export class ParentComponent {
  parentMessage = "Message from parent";

  receiveMessage($event) {
    console.log($event);
  }
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `,
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit("Message from child");
  }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {
  private messageSource = new BehaviorSubject<string>("Initial message");
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `,
})
export class ParentComponent {
  message: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => this.message = message);
  }

  sendMessage() {
    this.dataService.changeMessage("Message from parent");
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  `,
})
export class ChildComponent {
  message: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => this.message = message);
  }
}