Angular没有NameService的提供程序

我在加载一个类到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的提供者。

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

当前回答

NameService没有提供商是很多Angular2初学者都会遇到的一个常见问题。

原因:在使用任何自定义服务之前，你必须先将它注册到NgModule的providers列表中:

解决方案:

@NgModule({
    imports: [...],
    providers: [CustomServiceName]
})

2017-04-28 11:07:38

其他回答

Angular 2已经改变了，你的代码顶部应该是这样的:

import {
  ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {NameService} from "./services/NameService";

@Component({
  selector: 'app',
  appInjector: [NameService]
})

此外，你可能想在你的服务中使用getter和setter:

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

然后在你的应用程序中，你可以简单地做:

this.names = nameService.names;

我建议你去plnkr。co，然后创建一个新的Angular 2 (ES6)插件，让它先在里面工作。它会为你安排好一切。一旦它在那里工作，将其复制到您的其他环境中，并对该环境中的任何问题进行分类。

2015-06-01 21:43:47

您必须使用提供程序而不是注入程序

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

完整的代码示例。

2015-08-30 16:55:30

在Angular中，你可以用两种方式注册服务:

1. 在模块或根组件中注册服务

效果:

可用于所有组件适用于终身应用

如果你将一个服务注册到一个惰性加载模块中，你应该注意:

该服务仅可用于该模块中声明的组件只有当模块被加载时，该服务才在生命周期应用程序中可用

2. 将服务注册到任何其他应用程序组件

效果:

是否将服务的单独实例注入到组件中

如果将服务注册到任何其他应用程序组件中，您应该小心

注入服务的实例将仅对组件及其所有子组件可用。该实例将在组件的生命周期内可用。

2018-11-17 10:24:23

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

bootstrap(MyAppComponent,[NameService]);

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

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

2015-10-11 13:05:52

将其添加到提供者而不是注射剂中

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

2017-02-18 19:00:20

Angular没有NameService的提供程序

推荐文章

最新文章

标签