angular2 中没有服务错误的提供者，为什么我需要将它注入到它的父组件中? [英] No provider for service error in angular2, why do I need to inject it in it's parent component?

问题描述

我有一个 pages.service.ts

I have a pages.service.ts

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

import { ApiService } from '../../apiService/api.service';

import { Playlists } from '../shared/playlists.model';


@Injectable()
export class PagesService {

  private currentPlaylists: Subject<Playlists> = new BehaviorSubject<Playlists>(new Playlists());

  constructor(private service: ApiService) {

  }


}

这个页面服务需要另外一个叫ApiService的服务，我注入的方式如上图，可以正常运行.

This pages service needs another service called ApiService, I inject the way as shown above, it works.

我在 main.ts 中引导 ApiService

I bootstrap ApiService in main.ts

import { ApiService }  from './apiService/api.service';
import { AppComponent } from './app.component';

bootstrap(AppComponent,[
  disableDeprecatedForms(),
  provideForms(),
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  ApiService
]).catch((err: any) => console.error(err));;

但是当我尝试将 PagesService 注入另一个组件时，它给了我错误，PagesService 没有提供程序.

But When I try to inject the PagesService to another component, it gives me error, No Provider for PagesService.

我像这样编写那个组件.

I write that component like this.

    import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
    import { CORE_DIRECTIVES } from '@angular/common';

    import { MODAL_DIRECTVES, BS_VIEW_PROVIDERS } from 'ng2-bootstrap/ng2-bootstrap';


    import { ApiService } from '../../apiService/api.service';
    import { PagesService } from '../../pages/shared/pages.service';


    @Component({
      selector: 'assign-playlist-modal',
      exportAs: 'assignModal',
      providers: [ PagesService ],
      directives: [MODAL_DIRECTVES, CORE_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
      viewProviders: [BS_VIEW_PROVIDERS],
      styleUrls: ['app/channel/shared/assignPlaylist.css'],
      templateUrl: 'app/channel/modals/assignPlaylistModal.html'
    })

    export class AssignPlaylistModalComponent {


      constructor(private apiService: ApiService, private pageService: PagesService, fb: FormBuilder) {
       }
}

更新:这是我的文件结构

channel/
--channel.component.ts
--shared/
----assignPlaylist.modal.ts
----addPlaylist.modal.ts
pages/
--shared/
----pages.service.ts
--pages.component.ts

Channel 组件是 addPlaylist 的父级，addPlaylist 是assignPlaylist 的父级.这种结构不起作用

Channel component is the parent of addPlaylist, addPlaylist is the parent of assignPlaylist. This structure will not work

ChannelComponent       
       |
AddPlaylistComponent
       |
AssignPlaylistComponent     ----PagesService----ApiService

我找到了一种解决方案，但不知道为什么需要这样做，

我将提供者PagesService"添加到 ChannelComponent 和 AssignPlaylistComponent，它会工作，没有错误.

I add the provider 'PagesService' to ChannelComponent, and also the AssignPlaylistComponent, it will work, no errors.

即使这样也行

ChannelComponent            ----PagesService-------------
       |
AddPlaylistComponent
       |
AssignPlaylistComponent     ----ApiService---------------

但是，我只是想在AssignPlaylistComponent中使用PagesService，所以我认为在channelcomponent.ts中导入PagesService并在其中创建一个providers数组是没有意义的.

However, I just want to use PagesService in AssignPlaylistComponent, so I think it not make sense to import PagesService in channelcomponent.ts and make a providers array in it.

推荐答案

有点奇怪，但是只有组件可以在 Angular 中配置依赖注入(嗯，还有 bootstrap()).即，只有组件可以指定提供者.

It is a bit strange, but only components can configure dependency injection in Angular (well, and bootstrap()). I.e., only components can specify providers.

如果组件指定了 providers 数组，则组件树中的每个组件都将获得一个关联的注入器".我们可以把它想象成一个注入树，它(通常)比组件树稀疏.当需要解决依赖项(通过组件或服务)时，会参考此注入器树.可以满足依赖关系的第一个注入器会这样做.注入器树向上走，朝向根组件/注入器.

Each component in the component tree will get an associated "injector" if the component has a providers array specified. We can think of this like an injector tree, that is (normally much) sparser than the component tree. When a dependency needs to be resolved (by a component OR a service), this injector tree is consulted. The first injector that can satisfy the dependency does so. The injector tree is walked up, toward the root component/injector.

因此，为了让您的 PagesService 注入 ApiService 依赖项，首先必须使用注入器注册该 ApiService 对象.即，在组件的 providers 数组中.此注册必须发生在您要使用/注入 ApiService 的组件处或上方.

So, in order for your PagesService to inject a ApiService dependency, that ApiService object first has to be registered with an injector. I.e., in a component's providers array. This registration must occur somewhere at or above the component where you want to use/inject the ApiService .

然后您的服务应该能够注入注册的 ApiService 对象，因为它会在注入器树中找到它.

Your service should then be able to inject the registered ApiService object, because it will find it in the injector tree.

另见 Angular 2 - 在服务中包含提供者.

这篇关于angular2 中没有服务错误的提供者，为什么我需要将它注入到它的父组件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！