app.module 供应商和组件是否共享 Injectable 的同一个实例?
Do app.module providers and components share the same instance of an Injectable?
当我将可注入的 CameraChannelService 添加到 ngModule 的提供程序数组中时:
import { CameraChannelService } from './camera-channel.service';
@NgModule({
declarations: [
AppComponent,
BabylonWallpaperDirective,
MenuComponent,
WorksComponent,
LabsComponent,
ProfileComponent,
ActionBtnComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
providers: [
CameraChannelService
],
bootstrap: [AppComponent]
})
它是否只为该组件创建一个新实例?当我将其注入 NgModules 声明组件之一时?
import { Component, OnInit } from '@angular/core';
import {CameraChannelService} from '../camera-channel.service';
@Component({
selector: 'app-works',
templateUrl: './works.component.html',
styleUrls: ['./works.component.scss'],
providers: [CameraChannelService]
})
export class WorksComponent implements OnInit {
constructor(private cameraChannel: CameraChannelService) { }
ngOnInit() {
console.log(this.cameraChannel);
}
}
是的...
如果将providers: [CameraChannelService]
添加到组件的@Component decorator
,它创建一个仅限于该组件的新实例.
如果您在 @NgModule
中声明 providers: [CameraChannelService]
即 创建一个作用域为整个应用程序的实例。
因此,如果您想在整个应用程序中使用相同的实例,则只需在@NgModule decorator
中声明服务AppModule.ts
文件的 并且不要在 Component's @Component decorator
中再次声明它
旁注:与其声明服务于@NgModule
,不如使用CoreModule 声明服务并将其导入 AppModule
。所以,以后如果你想配置你的服务,你就可以配置你的服务了。
当我将可注入的 CameraChannelService 添加到 ngModule 的提供程序数组中时:
import { CameraChannelService } from './camera-channel.service';
@NgModule({
declarations: [
AppComponent,
BabylonWallpaperDirective,
MenuComponent,
WorksComponent,
LabsComponent,
ProfileComponent,
ActionBtnComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
providers: [
CameraChannelService
],
bootstrap: [AppComponent]
})
它是否只为该组件创建一个新实例?当我将其注入 NgModules 声明组件之一时?
import { Component, OnInit } from '@angular/core';
import {CameraChannelService} from '../camera-channel.service';
@Component({
selector: 'app-works',
templateUrl: './works.component.html',
styleUrls: ['./works.component.scss'],
providers: [CameraChannelService]
})
export class WorksComponent implements OnInit {
constructor(private cameraChannel: CameraChannelService) { }
ngOnInit() {
console.log(this.cameraChannel);
}
}
是的...
如果将providers: [CameraChannelService]
添加到组件的@Component decorator
,它创建一个仅限于该组件的新实例.
如果您在 @NgModule
中声明 providers: [CameraChannelService]
即 创建一个作用域为整个应用程序的实例。
因此,如果您想在整个应用程序中使用相同的实例,则只需在@NgModule decorator
中声明服务AppModule.ts
文件的 并且不要在 Component's @Component decorator
旁注:与其声明服务于@NgModule
,不如使用CoreModule 声明服务并将其导入 AppModule
。所以,以后如果你想配置你的服务,你就可以配置你的服务了。