如何爲非親子Angular 2組件創建服務

Question

我真的無法爲「無關」Angular 2組件創建服務。然而，親子關係（我使用綁定或事件發射器）沒有問題。

我有3個文件：

1. StatsService應攜帶數據。
2. MatchBoard組件生成足球鏡頭
3. StatsComponent將打印數量打印到屏幕上。

但我已經處理了幾個小時，閱讀了官方的A2文檔，仍然無法找出解決方案。

我想要什麼：我只是想生成鏡頭（每2秒），抓住他們的服務併發送到StatsComponent，以便它顯示屏幕上的鏡頭數量。那很簡單。

的StatsService部件

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

@Injectable() 
export class StatsService { 
    private homeTeamShots = new Subject<any>(); 
    homeTeamShots$ = this.homeTeamShots.asObservable(); 
    publishData(data:any){ 
    this.homeTeamShots.next(data); 
    } 

} 

護牆板部件

import { Component, Input, OnInit, OnChanges } from '@angular/core'; 
import {StatsService} from '../stats.component/stats.service'; 

@Component({ 
    selector: 'match-board', 
    templateUrl: './matchboard.component.html', 
    styleUrls: ['./matchboard.component.css'] 
}) 

export class MatchBoard implements OnChanges { 
    homeTeamShots:number = 0; 
    constructor(private _statsService:StatsService) { 
    this._statsService.homeTeamShots$.subscribe(
     data => { 
     console.log('matchboard received this: ' + data); 
     } 
    ) 
    } 
    ngOnChanges(){ 

    } 

    onHomeTeamShot(){ 
    this.homeTeamShots += 1; 
    this._statsService.publishData(this.homeTeamShots); 
    } 

    ngOnInit(){ 
    // shots are taken every 2 seconds as a example 
    setInterval(()=> this.onHomeTeamShot(), 2000); 
    } 

} 

而且StatsComponent

import { Component, Input, OnInit, OnChanges } from '@angular/core'; 
import {StatsService} from '../stats.component/stats.service'; 

@Component({ 
    selector: 'stats', 
    templateUrl: './stats.component.html', 
    styleUrls: ['./stats.component.css'], 
    providers: [StatsService] 
}) 
export class StatsComponent implements OnChanges { 
    homeTeamShots:number; 
    constructor(private _statsService:StatsService) { 
    this.homeTeamShots = 0; 
    this._statsService.homeTeamShots$.subscribe(
     data => { 
     this.homeTeamShots = data; 
     console.log('Sibling2Component-received from sibling1: ' + data); 
     } 
    ); 
    } 

    ngOnChanges(){ 

    } 

    onHomeTeamShot() { 
    this.homeTeamShots += 1; 
    console.log('number of shots in stats now ' + this.homeTeamShots); 
    this._statsService.publishData(this.homeTeamShots); 
    } 

    ngOnInit(){ 
    setInterval(()=> console.log(this.homeTeamShots), 2050); 
    } 
} 

在控制檯中，我得到「企口收到此：2（然後是3，然後4像正常一樣）' from MatchBoard com Ponent（波納恩特）。 但是，這個問題始於StatsComponent - 它在'subscribe'之後被卡住，並且一直記錄爲'0'。

我試着在statsComponent的某個地方調用onHomeTeamShot（），但它從頭開始一直顯示'1'並且不會改變。

Answer 1

原因是在StatsComponent線

providers: [StatsService] 

。這意味着StatsComponent有一個自己的服務實例。 解決方案是讓組件中的提供者僅位於三個組件之上，並從StatsComponent中移除該行。

您可以找到有關，這裏的一些詳細信息：https://angular.io/guide/hierarchical-dependency-injection

Answer 2

移所有的邏輯服務，並充分利用的Observables力量做繁重。

在您的服務中，使用.interval()創建一個Observable。這會照顧你的投票。您甚至不需要publishData()，因爲您已經在使用Subject。我創建了一個名爲generateShots()

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

@Injectable() 
export class StatsService { 
    private homeTeamShots = new Subject<any>(); 
    homeTeamShots$ = this.homeTeamShots.asObservable(); 

    generateShots() { 
     return Observable.interval(2000) 
      .map(ticks => this.homeTeamShots$.next(ticks)); 
      //.interval() returns a single integer, starting from 0,1,2.... 
      //just simply update your subject with that value. 
    } 

} 

現在，在MatchBoard組件「開始」倒計時功能，只需訂閱generateShots()：

ngOnInit() { 
    this._statsService.generateShots() 
     .subscribe(shots => this.homeTeamShots = shots); 
    //this.homeTeamShots will increment from 0 to 1,2,3.... every 2000ms 
} 

而且在StatsComponent顯示你的投籃，訂閱您homeTeamShots$Subject ：

ngOnInit() { 
    this._statsService.homeTeamShots$.subscribe(
     data => { 
      this.homeTeamShots = data; 
      console.log('Sibling2Component-received from sibling1: ' + data); 
     } 
    ); 
} 

而瞧，你有兩個組件通過單個共享服務（單例）同步數據。清潔。