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的提供者。

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

当前回答

从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]
})

2016-01-31 18:50:08

其他回答

在Angular v2及更高版本中，它现在是:

@ component ({ 选择器:“我的程序”, 提供者:[NameService], 模板:…… }）

2016-08-18 19:17:37

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

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

完整的代码示例。

2015-08-30 16:55:30

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

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

解决方案:

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

2017-04-28 11:07:38

令人震惊的是，在Angular的最新版本中，语法又发生了变化:-)

从Angular 6.0开始，创建单例对象的首选方式服务是在服务上指定应该在哪个服务中提供服务应用程序根目录。这可以通过将providedIn设置为root on来实现服务的@Injectable装饰器:

src / app /用户服务。0。注意事项

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

2018-08-14 17:59:53

嗨，你可以在你的.ts文件中使用这个:

首先在这个.ts文件中导入你的服务:

import { Your_Service_Name } from './path_To_Your_Service_Name';

然后在同一个文件中添加提供商:

 @Component({
      selector: 'my-app',
      providers: [Your_Service_Name],
      template: `
        <h1>Hello World</h1> `   
    })

2017-01-24 12:30:00

Angular没有NameService的提供程序

推荐文章

最新文章

标签