angular2中沒有提供服務錯誤的提供程序，為什么我需要將其注入到其父組件中？

Question

我有一個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，所以我認為在channelcomponent.ts中導入PagesService並在其中創建providers數組是沒有意義的。

Answer 1

有點奇怪，但是只有組件可以在Angular中配置依賴項注入（好，還有bootstrap() ）。 即，只有組件可以指定提供程序。

如果組件樹中指定了providers數組，則組件樹中的每個組件都將獲得一個關聯的“注入器”。 我們可以將其視為注入器樹，（通常比組件樹稀疏）。 當需要解決依賴關系時（通過組件或服務），將查詢該注入器樹。 可以滿足依賴性的第一個噴油器就這樣做了。 進樣器樹向根組件/進樣器移動。

因此，為了使PagesService注入ApiService依賴項，必須首先向該注入器注冊該ApiService對象。 即，在組件的providers數組中。 此注冊必須在您要使用/注入ApiService的組件處或上方的某個位置進行。

然后，您的服務應該能夠注入已注冊的ApiService對象，因為它將在注入器樹中找到它。

另請參閱Angular 2-在服務中包含提供程序 。