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

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

当前回答

你应该在你的AppModule的NgModule元数据的providers数组中注入NameService。

@NgModule({
   providers: [MyService]
})

并且确保在你的组件中导入相同的名称(区分大小写)，因为SystemJs是区分大小写的(根据设计)。如果你在你的项目文件中使用不同的路径名，像这样:

main.module.ts

import { MyService } from './MyService';

your-component.ts

import { MyService } from './Myservice';

那么System js会进行两次导入

2017-01-09 08:52:54

其他回答

令人震惊的是，在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

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

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

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

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

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

砰砰作响

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

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

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

2015-11-14 23:21:39

Angular2要求你在bootstrap函数调用中声明所有的注入对象。没有这个，你的服务就不是一个可注入的对象。

bootstrap(MyAppComponent,[NameService]);

2015-10-11 13:20:14

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

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

效果:

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

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

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

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

效果:

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

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

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

2018-11-17 10:24:23

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

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

2016-08-18 19:17:37

Angular没有NameService的提供程序

推荐文章

最新文章

标签