將服務分享給多個組件

Question

我想在我的應用程序中共享幾項服務，這些服務負責我的節點服務器上的API調用。

通過下面的官方文檔，這就是我想

// 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 { } 

在我的部件之一，現在我想訪問我的team.api.service這應該是訪問，因爲由一個提供父母組件，但我面對這個錯誤

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

渲染的成分，我覺得顯然是有點怪異沒有進口我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

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 '...';