共享服务到多个组件

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

可能是打错了，但是您忘记在 TeamIndexComponent 组件的模块中导入 TeamApiService class:

import { TeamApiService } from '...';

Answer 2

在要使用服务的组件中导入服务没有问题。

文档说，

当您将服务包含在组件的 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){

    }
}

只需确保您没有在 providers:[] 数组中指定您的服务，因为它将创建新实例。

希望对您有所帮助。

共享服务到多个组件

Share services to multiple components

angular2-services

angular