Angular 2. Как организовать взаимодействие между компонентами через сервис?

Question

[Александр Шелеметьев]

Нужно организовать взаимодействие между компонентами в Angular 2. Делаю по документации.
Рут компонент app.component.ts:

import { Component } from '@angular/core';
import {TestComponent} from './test/test.component';
import {ButtonComponent} from './button/button.component';

@Component({
    selector: 'my-app',
    directives: [TestComponent, ButtonComponent],
    template: `<h1>My First Angular 2 App</h1> 
    <my-test></my-test> 
    <my-button></my-button>`
})
export class AppComponent { }

Компонент, получающий сообщение, test.component.ts:

import { Component, OnDestroy } from '@angular/core';
import { Subscription }   from 'rxjs/Subscription';
import { SendService } from '../send/send.service';

@Component({
  selector: 'my-test',
  providers: [SendService],
  template: `<div>Message:</div>
  <div>{{message}}</div>
  `,
})

export class TestComponent implements OnDestroy{
  	message: string = 'test';
	subscription: Subscription;

  constructor(private sendService: SendService) {
    this.subscription = sendService.message$.subscribe(
      message => {
        this.message = message;
        console.log(`Message: '${message}'`)
    });
  }

  ngOnDestroy(){
  	this.subscription.unsubscribe();
  }
}

Компонент, отправляющий сообщение, button.component.ts:

import { Component } from '@angular/core';
import { SendService } from '../send/send.service';

@Component({
  selector: 'my-button',
  providers: [SendService],
  template: `
    <button type="submit" (click)="submit()">Submit</button>
  `,
})

export class ButtonComponent {
  constructor(private sendService: SendService){}

  submit(){
    console.log('Button pressed');
    this.sendService.sendMessage('My message');
  }
}

Сервис send.service.ts:

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

@Injectable()
export class SendService {
  // Observable string sources
  private messageSource = new Subject<string>();
  // Observable string streams
  message$ = this.messageSource.asObservable();
  // Service message commands
  sendMessage(message: string) {
    this.messageSource.next(message);
    console.log(`run sendMessage('${message}')`);
  }
}

Должно работать так:
Нажимаю на кнопку в button.component.
Через сервис send.service отправляется сообщение.
Это сообщение должно быть принято и отображено компонентом tets.component. Но не отображается.
В консоли:

button.component.ts:16 Button pressed
send.service.ts:13 run sendMessage('My message')

ЧЯДНТ?

Answer 1

[_ _]

Вы "делаете не так" инъекцию зависимостей - в вашем случае будут созданы 2 экземпляра SendService.
Рекомендую еще раз почитать доки к Angular2 в части DI. Еще могу порекомендовать ngbook2.

Чтобы работал ваш пример, перенесите providers в AppComponent