cambio de detección entre 2 componentes angulares - angular

Tengo 2 componentes: navegación (que muestra la lista de temas) y lista de videos (que muestra el seleccionado).

Todo lo que quiero hacer es que cuando haga clic en algún elemento de navegación, el título de la lista de videos cambie.

navigation.component.ts

import { Component, OnInit } from "@angular/core";
import {DataService} from "../../../services/data.service";

@Component({
selector: "app-navigation",
templateUrl: "./navigation.component.html",
styleUrls: ["./navigation.component.css"],
providers: [DataService]
})
export class NavigationComponent implements OnInit {
allTopics: any;
mainTopics: any;
constructor(private data: DataService) {
this.allTopics      = this.data.getAllTopics().subscribe(data => {
this.allTopics    = data;
this.mainTopics   = Object.keys(data);
} );
}

setCurrentSelectedSubTopic(subTopic) {
this.data.setCurrentSelectedSubTopic(subTopic)
}

ngOnInit() {
}
}

en este componente tengo una acción de clic:

(click)="setCurrentSelectedSubTopic(subTopic)"

cuando hago clic, obtengo un buen console.log. Esta función actualiza un servicio.

data.service.ts

import { Injectable }     from "@angular/core";
import { Observable }     from "rxjs/Observable";
import { Http, Response } from "@angular/http";

@Injectable()
export class DataService {
currentSelectedSubTopic: any;
constructor(private http: Http) {}

getAllTopics(): Observable<any> {
return this.http.get(`http://localhost:4200/getAllTopics`)
.map(res => res.json())
}

setCurrentSelectedSubTopic(subTopic) {
this.currentSelectedSubTopic = subTopic;
}
}

este servicio se inyecta en video-list.component.ts

import { Component, OnInit } from "@angular/core";
import { DataService } from "../../../services/data.service";

@Component({
selector: "app-video-list",
templateUrl: "./video-list.component.html",
styleUrls: ["./video-list.component.css"],
providers: [DataService]
})
export class VideoListComponent implements OnInit {
constructor(public data: DataService) {

}

ngOnInit() {
}
}

y html es:

<p>
{{data.currentSelectedSubTopic ? data.currentSelectedSubTopic.Name : ""}}
</p>

no importa lo que intenté hacer, este html no cambia

Respuestas

2 para la respuesta № 1

No puede ver la actualización inmediata porque está utilizando diferentes instancias de DataService. Para que funcione, asegúrese de tener una única instancia de su servicio. Para hacer eso, pon providers matriz en AppModule"s o RootComponent"s @NgModule decorador como se muestra a continuación,

@NgModule({
...
...
providers: [DataService]
...
})

y eliminar providers: [DataService] de ambos componentes individuales.

---