Angular 2. How to organize interaction between components through a service?

Question

Angular

It is necessary to organize the interaction between components in Angular 2. I do it according to the documentation .
Root component 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 { }

The component receiving the message is 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();
  }
}

The component sending the message is 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');
  }
}

Service 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}')`);
  }
}

It should work like this:
I click on the button in button.component.
A message is sent through the send.service service.
This message must be received and rendered by the tets.component. But it doesn't show up.
In console:

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

CHADNT?

Answer 1

You are "doing wrong" dependency injection - in your case 2 SendService instances will be created.
I recommend once again to read the docks for Angular2 in terms of DI. I can also recommend ngbook2.
For your example to work, move the providers to the AppComponent