Angular没有NameService的提供者-Java 学习之路

240

将类加载到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);

services/NameService.ts

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

我一直收到错误消息“没有NameService的提供者”......

有人可以帮助我发现我的代码中的小问题吗？

17 回答

2
添加到 providers 而不是 injectables
```
@Component({
    selector:'my-app',
    providers: [NameService]
})
```
回复于 2024-04-20T20:42:41+08:00
3
令人震惊的是，语法在最新版本的Angular中再次发生了变化:-)来自Angular 6 docs：

从Angular 6.0开始，创建单例服务的首选方法是在服务上指定应在应用程序根目录中提供它 . 这是通过在服务的@Injectable装饰器上将provideIn设置为root来完成的：

src/app/user.service.0.ts
```
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}
```
回复于 2024-04-20T20:42:41+08:00
11
您必须使用 providers 而不是 injectables
```
@Component({
    selector: 'my-app',
    providers: [NameService]
})
```
Complete code sample here .
回复于 2024-04-20T20:42:41+08:00
66
在Angular 2中，有三个地方可以“提供”服务：
- bootstrap
- 根组件
- 其他组件或指令
"The bootstrap provider option is intended for configuring and overriding Angular's own preregistered services, such as its routing support." - reference

如果您只想在整个应用程序中使用一个NameService实例（即Singleton），请将其包含在根组件的 providers 数组中：
```
@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }
```
Plunker

如果您希望每个组件只有一个实例，请在组件的配置对象中使用 providers 数组：
```
@Component({
   providers: [NameService],
   ...
)}
export class SomeOtherComponentOrDirective { ... }
```
有关详细信息，请参阅Hierarchical Injectors doc .
回复于 2024-04-20T20:42:41+08:00

从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;
    }
}

并在组件配置中添加 providers ：

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

回复于 2024-04-20T20:42:41+08:00

18
你应该在 AppModule 的 NgModule 元数据的 providers 数组中注入 NameService .
```
@NgModule({
   imports: [BrowserModule, ...],
   declarations: [...],
   bootstrap: [AppComponent],
   //inject providers below if you want single instance to be share amongst app
   providers: [MyService]
})
export class AppModule {

}
```
如果要在不打扰应用程序状态的情况下为特定组件级别创建依赖关系，则可以在组件 providers 元数据选项上注入该依赖关系，如所显示的已接受@Klass答案 .
回复于 2024-04-20T20:42:41+08:00
1
您应该在AppModule的NgModule元数据的providers数组中注入NameService .
```
@NgModule({
   providers: [MyService]
})
```
并确保使用相同的名称（区分大小写）在组件中导入，因为SystemJs区分大小写（按设计） . 如果在项目文件中使用不同的路径名，如下所示：

main.module.ts
```
import { MyService } from './MyService';
```
您-component.ts
```
import { MyService } from './Myservice';
```
然后系统js将进行双重导入
回复于 2024-04-20T20:42:41+08:00
4

在Angular v2及以上它现在是：

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

回复于 2024-04-20T20:42:41+08:00

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）插件并让它首先在那里工作 . 它将为您设置一切 . 一旦它在那里工作，将其复制到您的其他环境并对该环境的任何问题进行分类 .

回复于 2024-04-20T20:42:41+08:00

11
错误 No provider for NameService 是许多Angular2初学者面临的常见问题 .

Reason ：在使用任何自定义服务之前，首先必须通过将其添加到提供者列表中将其注册到NgModule：

Solution:
```
@NgModule({
    imports: [...],
    providers: [CustomServiceName]
})
```
回复于 2024-04-20T20:42:41+08:00
372
您还可以在bootstrap-command中声明依赖项，如：
```
bootstrap(MyAppComponent,[NameService]);
```
至少那是在alpha40中对我有用的东西 .

这是链接：http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0
回复于 2024-04-20T20:42:41+08:00

Hi , You can use this in your .ts file :

首先在此.ts文件中导入您的服务：

import { Your_Service_Name } from './path_To_Your_Service_Name';

然后在同一个文件中添加 providers: [Your_Service_Name] ：

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

回复于 2024-04-20T20:42:41+08:00

1
您需要将其添加到providers数组，其中包括组件的所有依赖项 .

在角度文档中查看此部分：

在组件中注册提供程序这是一个修订的HeroesComponent，它在其providers数组中注册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 { }
```
何时使用NgModule与应用程序组件一方面，NgModule中的提供程序在根注入器中注册 . 这意味着在整个应用程序中可以访问在NgModule中注册的每个提供者 . 另一方面，在应用程序组件中注册的提供程序仅在该组件及其所有子组件上可用 . 这里，APP_CONFIG服务需要在整个应用程序中可用，因此它已在AppModule @NgModule providers数组中注册 . 但由于HeroService仅在Heroes功能区域内使用，而在其他地方使用，因此在HeroesComponent中注册它是有意义的 . 另请参阅“我应该将应用范围的提供程序添加到根AppModule还是根AppComponent？”在NgModule FAQ中 .

因此，在您的情况下，只需将注射剂更改为以下提供者：
```
@Component({
  selector: 'my-app',
  providers: [NameService]
})
```
另外在Angular的新版本中，@ View和其他一些东西都没了 .

有关详细信息，请访问here .
回复于 2024-04-20T20:42:41+08:00
3
Angular2要求您在bootstrap函数调用中声明所有注入 . 没有这个，您的服务不是可注射的对象 .
```
bootstrap(MyAppComponent,[NameService]);
```
回复于 2024-04-20T20:42:41+08:00

将@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]
})

或者如果您想在整个应用程序中访问您的服务，您可以通过应用程序提供商

回复于 2024-04-20T20:42:41+08:00

3
加您对app.module.ts文件中的providers []数组的服务 . 如下

//这里我的服务是CarService

app.module.ts
```
import {CarsService} from './cars.service';

providers: [CarsService] // you can include as many services you have
```
回复于 2024-04-20T20:42:41+08:00
30
在Angular中，您可以通过两种方式注册服务：

1. Register a service in module or root component

功效：
- 适用于所有组件
- 终身申请时可用
如果将服务注册到延迟加载的模块，则应该注意：
- 该服务仅适用于在该模块中声明的组件
- 只有在加载模块时，该服务才能在终身应用程序中使用
2. Register a service into any other application component

功效：
- 将向服务组件注入单独的Service实例
如果您将服务注册到任何其他应用程序组件，则应该小心
- 注入服务的实例仅可用于组件及其所有子组件 .
- 该实例将在组件生命周期中可用 .
回复于 2024-04-20T20:42:41+08:00

Angular没有NameService的提供者

17 回答

相关问题