Änderung Erkennung zwischen 2 Winkelkomponenten

Question

Ich habe 2 Komponenten - Navigation (die Themen Liste zeigt) und Video-Liste (die zeigt die ausgewählte).

Alles, was ich tun möchte, ist, dass wenn ich auf ein Navigationselement klicke, der Titel der Videoliste geändert wird.

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() { 
    } 
} 

auf dieser Komponente habe ich eine Aktion Klick:

(click)="setCurrentSelectedSubTopic(subTopic)" 

wenn i, klicken Sie ich ein gutes console.log bekommen. Diese Funktion aktualisiert einen Dienst.

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; 
    } 
} 

dieser Service zur Video-list.component.ts injiziert wird

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() { 
    } 
} 

und es ist html:

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

egal was Ich habe versucht zu tun, diese HTML ändert sich nicht

Answer 1

Sie können die sofortige Aktualisierung nicht sehen, da Sie verschiedene Instanzen von DataService verwenden. Damit es funktioniert, stellen Sie sicher, dass Sie eine einzelne Instanz Ihres Dienstes haben. Um das zu tun, setzen providers Array in AppModule's oder @NgModule decorator wie unten gezeigt,

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

und entfernen providers: [DataService] sowohl aus einzelnen Komponente.