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.
我这样写该组件.
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屋!