How to connect the interaction of parent components through the component of the children's route? (Angular2)

Question

In the root component of the route configuration, I have a button. When I click this button, I would like to trigger an event inside an activated child route.

I struggled with this for a while, and the only thing that seems promising is to use a bi-directional service (link to angular docs) . However, I'm not sure how to make it work.

Here is a demon demonstrating:

https://plnkr.co/edit/7zDTTTlABWD2GFo01jaz?p=preview

I set up a simple route configuration that automatically redirects to TestComponent. When I click the 'click' button at the route application level, I would like to be able to run the function clickDetected()inside TestComponent.

I hope everything is clear - any advice is welcome!

Code below;

---

app.component

@Component({
  selector: 'my-app',
  template: `
    <input type="button" (click)="onClick('hello')" value="click" />
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private testService: TestService) {
  }

  onClick(v){
    this.testService.declareClick(v)
  }
}

test.service

@Injectable()
export class TestService {

  private clickedSource = new Subject<string>();

  clicked$ = this.clickedSource.asObservable();

  declareClick(value: string) {
    console.log(value)
    return this.clickedSource.next(value);
  }

}

test.component

@Component({
  selector: 'my-test',
  template: `
    <div>
      <h1>Test Component</h1>
    </div>
  `,
})
export class TestComponent implements OnInit {

  public clicked?: any

  constructor(private testService: TestService) {
  }

  clickDetected(){
   console.log("parent clicked")
  }

  ngOnInit(){
    this.testService.declareClick()
/*      .subscribe((v) => {
        this.clicked? = v;
        console.log(v)
      })*/
  }

}

Answer 1

You just need to .subscribe()in Observablewhich accepts events .next():

this.testService.clickedSource.subscribe((val)=>{
  console.log(2, val);
});

Fixed Plunker: https://plnkr.co/edit/aPR6KvuOi2tgQXLgokHi?p=preview

Answer 2

EDIT - DO NOT DO IT -

@echonax, , , . , , - . , angular2 , .

END EDIT

, . , AppModule, . . plunkr , , .

SharedModule, angular2 doc. https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

plunkr. https://plnkr.co/edit/SU8AT4

---

import { NgModule } from '@angular/core';
import { TestService } from './test.service';

@NgModule({
  imports: [],
  declarations: [],
  providers: [
    TestService
  ],
  exports: [ ]
})
export class SharedModule { }

AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TestComponent } from './test.component';
import { SharedModule } from './shared.module';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule
  ],
  declarations: [
    AppComponent,
    TestComponent
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent }  from './test.component';
import { SharedModule } from './shared.module';

const appRoutes: Routes = [
  { path: '',   redirectTo: 'test', pathMatch: 'full' },
  { path: 'test',  component: TestComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes),
    SharedModule
  ],
  exports: [ RouterModule ],
  providers: []
})
export class AppRoutingModule { }