无提供者angular2服务错误，为什么我需要注入它在它的父组件？(No provider for

我有一个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其他服务，我注入如上图所示的方式，它的工作原理。

我在main.ts引导ApiService

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。

我写像这样的组件。

    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

信道分量是addPlaylist的父，addPlaylist是assignPlaylist的父。这种结构将无法正常工作

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

我找到了一个解决方案，但不知道为什么，我需要做的是，

我的供应商“PagesService”添加到ChannelComponent，也是AssignPlaylistComponent，它会工作，没有错误。

即使这将工作

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

不过，我只是想在AssignPlaylistComponent使用PagesService，所以我认为它没有意义进口PagesService在channelcomponent.ts并作出提供商阵列在里面。

这是一个有点怪，但只有组件可以在角配置依赖注入（当然，和bootstrap() 也就是说，只有组件可以指定供应商。

在组件树中的每个分量将获得关联的“喷射器”，如果组件具有providers指定的数组。我们可以认为这就像一个注射器树，即（通常远）高于组件树稀疏。当一个依赖需要（由组件或服务）来解决，该喷射器树协商。能够满足所述依赖关系的第一喷射器这样做。喷射器树走到朝向根组件/喷射器。

因此，为了您的PagesService注入一个ApiService依赖，即ApiService对象首先必须用注射器进行注册。即，在组件的providers阵列。该注册必须或要使用/注入ApiService组件上方某处发生。

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

另见角2 -包括服务提供商。