我在加载一个类到Angular组件时遇到了一个问题。很长一段时间以来,我一直在试图解决这个问题;我甚至试着把它们都合并到一个文件中。我拥有的是:

Application.ts

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

服务/ NameService.ts

export class NameService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getNames()
    {
        return this.names;
    }
}

我一直得到一个错误消息说没有NameService的提供者。

有人能帮我找出我的代码的问题吗?


当前回答

将@Injectable添加到你的服务中:

export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

在你的组件中添加提供商:

@Component({
    selector: 'my-app',
    providers: [NameService]
})

如果你想在整个应用程序中访问你的服务你可以传入应用程序提供程序

其他回答

你也可以在bootstrap命令中声明依赖项:

bootstrap(MyAppComponent,[NameService]);

至少这是我在alpha40中使用的方法。

这是链接:http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

在Angular 2中,你可以在三个地方“提供”服务:

引导 根组件 其他组件或指令

“引导提供者选项用于配置和覆盖Angular自己的预注册服务,比如路由支持。”——参考

如果你只想在整个应用中使用一个NameService实例(例如,Singleton),那么将它包含在根组件的providers数组中:

@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }

砰砰作响

如果你希望每个组件都有一个实例,可以使用组件配置对象中的providers数组:

@Component({
   providers: [NameService],
   ...
)}
export class SomeOtherComponentOrDirective { ... }

更多信息请参见分层注入器文档。

从Angular 2 Beta开始:

将@Injectable添加到你的服务中:

@Injectable()
export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

在你的组件配置中添加提供商:

@Component({
    selector: 'my-app',
    providers: [NameService]
})

您需要将其添加到providers数组中,该数组包含组件上的所有依赖项。

请看angular文档中的这一部分:

在组件中注册提供者 下面是修改后的HeroesComponent,它注册了HeroService 提供者数组。

import { Component } from '@angular/core';

import { HeroService } from './hero.service';

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  <h2>Heroes</h2>
  <hero-list></hero-list>
  `
})
export class HeroesComponent { }

When to use NgModule versus an application component On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider registered within an NgModule will be accessible in the entire application. On the other hand, a provider registered in an application component is available only on that component and all its children. Here, the APP_CONFIG service needs to be available all across the application, so it's registered in the AppModule @NgModule providers array. But since the HeroService is only used within the Heroes feature area and nowhere else, it makes sense to register it in the HeroesComponent. Also see "Should I add app-wide providers to the root AppModule or the root AppComponent?" in the NgModule FAQ.

所以在你的情况下,简单地改变注入到提供商如下所示:

@Component({
  selector: 'my-app',
  providers: [NameService]
})

在Angular的新版本中,@View和其他一些东西也消失了。

欲了解更多信息,请访问这里。

在app.module.ts文件中将服务添加到providers[]数组中。 像下面的

//这里我的服务是CarService

app.module.ts

import {CarsService} from './cars.service';

providers: [CarsService] // you can include as many services you have