여러 구성 요소로 서비스 공유

Question

내 응용 프로그램 전체에서 몇 가지 서비스를 공유하려고합니다. 이러한 서비스는 내 노드 서버에서 API 호출을 담당합니다. 공식 문서에 따라

, 이쪽은 내 구성 요소 중 하나 지금 중 하나에 의해 제공하기 때문에 접근 할 수 있어야하는데 내 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.api.service을 가져 오지 않은 것이 분명 조금 이상한 기분이 오류를

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

의 원인이 렌더링에 포함 된 구성 요소입니다. 이 가져 오기를 추가하면 제대로 작동하지만 문서에 따르면 다른 서비스 인스턴스를 사용하게 될 것입니다.

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