Teilen von Diensten für mehrere Komponenten

Question

Ich versuche, einige Dienste in meiner ganzen App zu teilen, diese Dienste sind verantwortlich für den API-Aufruf auf meinem Node-Server.

Durch die offizielle Dokumentation folgen, das ist, was ich versucht

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

In einem meiner Komponenten ich jetzt versuche, meine team.api.service zuzugreifen, die zugänglich sein soll, weil durch die Anzeige einer von die Eltern Komponenten, aber ich bin dieser Fehler auftritt

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

die einzige Komponente zwischen meiner app und teamIndex auf den Router, vermisste ich wahrscheinlich etwas über Dependency Injection.

Dies ist die Komponente in der Rendering beteiligt, die den Fehler

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

Ich fühle mich natürlich ein bisschen komisch, nicht importieren meine team.api.service in der Komponente führen, wo ich es benutze. Wenn ich diesen Import hinzufüge, funktioniert es gut, aber dann werde ich gemäß der Dokumentation verschiedene Instanzen meines Dienstes verwenden.

Answer 1

Es ist nichts falsch, wenn Sie Ihren Dienst in der Komponente importieren, wo Sie verwenden Service möchten.

Dokumentation sagt,

Eine neue Instanz des Service wird erhalten, wenn Sie Ihren Dienst in providers:[] Ihrer Komponente.

So ist es in Ordnung, wenn Sie Ihren Dienst verwenden wie:

Ihren Dienst importieren in main.ts

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

dann nur eine Instanz des Service in Ihrer App zugänglich sein.

Dann können Sie diese Instanz in jeder gewünschten Komponente verwenden.

Komponente 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){ 

    } 
} 

nur sicherstellen, dass Sie nicht festlegen, Ihren Dienst in Anbieter: [] Array, wie es neue Instanz geschaffen werden.

Hoffe, das hilft.

Answer 2

Vielleicht ist es ein Tippfehler, aber sie vergessen, die TeamApiService Klasse in dem Modul der TeamIndexComponent Komponente zu importieren:

import { TeamApiService } from '...';