Question

我在将一个类加载到Angular组件时遇到了问题。我已经试图解决它很长一段时间了;我甚至尝试在一个文件中加入所有内容。我所拥有的是：

Application.ts

paragraph: One
paragraph: Two
paragraph: Three

服务/ NameService.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);

我不断收到错误消息export class NameService { names: Array<string>; constructor() { this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } getNames() { return this.names; } }。

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

Answer 1

您必须使用providers代替injectables

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

Complete code sample here

Answer 2

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

自举
根组件
其他组件或指令

“引导程序提供程序选项用于配置和覆盖Angular自己的预注册服务，例如其路由支持。” - reference

如果您只想在整个应用程序中使用一个NameService实例（即Singleton），请将其包含在根组件的providers数组中：

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

Plunker

如果您希望每个组件只有一个实例，请改用组件配置对象中的providers数组：

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

有关详情，请参阅Hierarchical Injectors doc。

Answer 3

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

Answer 4

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

@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答案。

Answer 5

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

@NgModule({
   providers: [MyService]
})

并确保在组件中使用相同名称（区分大小写）进行导入，因为SystemJs区分大小写（按设计）。如果在项目文件中使用不同的路径名，请执行以下操作：

main.module.ts

import { MyService } from './MyService';

您-component.ts

import { MyService } from './Myservice';

然后系统js将进行双重导入

Answer 6

在Angular v2及以上版本中，现在是：

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

Answer 7

令人震惊的是，在最新版本的Angular中，语法再次发生了变化：-)从Angular 6 docs：

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

src / app / user.service.0.ts

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

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

Answer 8

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

Answer 9

错误@NgModule({ imports: [...], providers: [CustomServiceName] })是许多Angular2初学者面临的常见问题。

原因：在使用任何自定义服务之前，您首先必须将其注册到NgModule，方法是将其添加到提供者列表中：

<强>解决方案：

{{1}}

Answer 10

您还可以在bootstrap-command中声明依赖项，如：

bootstrap(MyAppComponent,[NameService]);

至少那个在alpha40中对我有用的东西。

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

Answer 11

嗨，您可以在.ts文件中使用它：

首先在此.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> `   
    })

Answer 12

将其添加到提供商而不是注入

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

Answer 13

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

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

在组件中注册提供商

这是一个修改过的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 { }

何时使用NgModule与应用程序组件

一方面，NgModule中的提供程序在根目录中注册   注射器。这意味着每个提供商都在NgModule中注册   将在整个申请中提供。

另一方面，在应用程序组件中注册的提供程序   仅适用于该组件及其所有子组件。

此处，APP_CONFIG服务需要全部可用   应用程序，因此它已在AppModule @NgModule提供程序中注册   阵列。但由于HeroService仅在英雄中使用   功能区域和其他任何地方，在它注册它是有道理的   HeroesComponent。

另请参阅“我是否应该将应用范围的提供商添加到根AppModule或   根AppComponent？“在NgModule FAQ中。

因此，在您的情况下，只需将注射剂更改为以下提供者：

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

同样在Angular的新版本中，@ View和其他一些东西都没了。

有关详细信息，请访问here。

Answer 14

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

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

Answer 15

将您的服务添加到app.module.ts文件中的providers []数组。如下所示

//这里我的服务是CarService

<强> app.module.ts

<ion-item>
  <ion-label floating>Username</ion-label>
  <ion-input></ion-input>
</ion-item>

Answer 16

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

bootstrap(MyAppComponent,[NameService]);

Answer 17

在Angular中，您可以通过两种方式注册服务：

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

效果：

适用于所有组件
可在终生申请中使用

如果将服务注册到延迟加载的模块中，则应注意以下事项：

该服务仅可用于在该模块中声明的组件中
只有在加载模块后，该服务才能在生命周期应用程序上提供

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

效果：

将单独的服务实例注入组件

如果将服务注册到任何其他应用程序组件中，则应注意

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

Answer 18

Blockquote

在组件中注册提供商

这是经过修订的HeroesComponent，在其provider数组中注册了HeroService。

UserDecorator.instance_methods
#=> [
#     :confirmed_at_datetime,
#     :locked_at_datetime,
#     :current_sign_in_at_datetime,
#     :last_sign_in_at_datetime,
#     :created_at_datetime
#   ]

Angular没有NameService的提供者

18 个答案: