サービスを複数のコンポーネントに共有する

Question

私はアプリケーション全体でいくつかのサービスを共有しようとしていますが、これらのサービスは自分のノードサーバー上のAPI呼び出しを担当しています。公式ドキュメントに従うことにより

が、これは私がの1が提供するので、私は今、アクセスできるようになっている私のteam.api.serviceにアクセスしようとしています私の構成要素の一つで

// app.component.ts 

import { Component }   from "@angular/core"; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import "./rxjs-operators"; 
import {CampaignApiService}  from "./services/api/campaign.api.service"; 
import {PlatformApiService}  from "./services/api/platform.api.service"; 
import {TeamApiService}   from "./services/api/team.api.service"; 
import {UserApiService}   from "./services/api/user.api.service"; 


@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: "app.component.html", 
    providers: [ 
     TeamApiService, 
     PlatformApiService, 
     CampaignApiService, 
     UserApiService, 
    ], 
    styleUrls: [], 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class AppComponent { } 

を試みたものです親コンポーネントが、私はルータをこのエラー

ReferenceError: TeamApiService is not defined at eval (app/components/team/index/team.index.component.js:48:77)

私のアプリとteamIndex間の成分のみをされて直面しています、私はおそらく依存性の注入について何かを逃しました。

これはエラー

// team.index.component.ts 

import { 
    Component, trigger, 
    state, style, 
    transition, animate, 
    OnInit 
}        from "@angular/core"; 
import { JSONP_PROVIDERS }  from '@angular/http'; 
import { TeamShowComponent } from "../show/team.show.component"; 
import { Observable }   from 'rxjs/Observable'; 

// Users 
import { Team }     from "../../../models/team.model"; 
import { TeamService }   from "../../../services/team.service"; 

@Component({ 
    moduleId: module.id, 
    selector: 'TeamIndex', 
    templateUrl: "team.index.html", 
    providers: [JSONP_PROVIDERS, TeamService, TeamApiService], 
    directives: [TeamShowComponent], 
    animations: [ 
     trigger('teamSelected', [ 
      state('false', style({ 
       transform: 'scale(1)' 
      })), 
      state('true', style({ 
       transform: 'scale(1)', 
       "z-index": 25 
      })), 
      transition('false => true', animate('100ms ease-in')), 
      transition('true => false', animate('100ms ease-out')) 
     ])] 
}) 

export class TeamIndexComponent implements OnInit { 
    teams: Observable<Team[]>; 
    distinctSettings: string[]; 
    mode = "Observable"; 
    selectedTeam: Team; 

    constructor (private teamService: TeamService, private teamApiService: TeamApiService) {} 

    ngOnInit() { 
     this.getTeams(); 
     this.teams.subscribe(
      teams => { 
       this.distinctSettings = this.teamService.getDistinctSettings(teams) 
      } 
     ) 
    } 

    getTeams() { 
     this.teams = this.teamApiService.getTeams(); 
    } 

    onSelect(team: Team) { 
     if (team === this.selectedTeam) 
      this.selectedTeam = null; 
     else 
      this.selectedTeam = team; 
    } 

    isSelected(team: Team) { 
     return team === this.selectedTeam; 
    } 
} 

を引き起こすレンダリングに関与する成分Iは、私はそれを使用していますコンポーネントで私team.api.serviceをインポートしませんでしたし、明らかに少し変な感じです。このインポートを追加するとうまくいきますが、ドキュメントに従って、私のサービスの異なるインスタンスを使用します。

Answer 1

あなたがサービスを利用したい部品にあなたのサービスをインポートするときに何も悪いことはありません。

ドキュメントは言うあなたのコンポーネントのproviders:[]にあなたのサービスが含まれている場合、

サービスの新しいインスタンスが作成されます。

ように、あなたのサービスを使用している場合、その罰金：

が main.ts

import {TeamApiService} from "./services/api/team.api.service"; 
bootstrap(TeamIndexComponent,[TeamApiService ] 
).then(
    success => console.log('App bootstrapped!'), 
    error => console.log(error) 
); 

にあなたのサービスをインポートするには、その後、あなたのサービスのインスタンスは1つだけのアプリ全体にアクセスできるようになります。

このインスタンスは、任意のコンポーネントで使用できます。 []配列を、新しいインスタンスが作成されますよう：

部品1

import {TeamApiService} from "./services/api/team.api.service"; 
import {Component} from '@angular/core' 
@Component({ 
selector:'demo', 
templateUrl:'demo.component.html',  
}) 
export class DemoComponent{ 
    //inject the service in your current component 
    constructor(private _teamApiService:TeamApiService){ 

    } 
} 

ちょうどあなたがプロバイダーにあなたのサービスを指定していないことを確認してください。

これが役に立ちます。

Answer 2

おそらくそれはタイプミスだが、あなたはTeamIndexComponent部品のモジュールでTeamApiServiceクラスをインポートするのを忘れ：

import { TeamApiService } from '...';