如何为全局websocket变量定义Angular8 Context Provider

问题描述

我在 AppModule

导入 RecruiterAdminChatsComponent

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { RecruiterAdminChatsComponent } from './recruiter-admin-chats/recruiter-admin-chats.component';


@NgModule({
  declarations: [
    RecruiterAdminChatsComponent,],imports: [
    CommonModule,})
export class AppModule {}

并且我在 app.comonent.ts 上定义了套接字服务，如下所示：

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

import { SocketService } from '../_services';

@Component({
    selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],})
export class AppComponent {
  constructor( private socketService: SocketService) {}
}

并且要在子组件 RecruiterAdminChatsComponent 上使用 socketservice ，我也包含了 socketservice ，如下所示。

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

import { SocketService } from '../_services';

@Component({
    selector: 'app-recruiter-admin-chats',templateUrl: './recruiter-admin-chats.component.html',styleUrls: ['./recruiter-admin-chats.component.scss'],})
export class RecruiterAdminChatsComponent {
  constructor( private socketService: SocketService) {}
}

如您所见，

SocketService 在父组件和子组件处插入了两次。 我知道这是很不好的事情。

如何像响应上下文一样使用在父级定义的socketservice变量？

解决方法

您应将SocketService移到providers中AppModule部分下。它将SocketService注入为Singleton。

@NgModule({
  declarations: [
    RecruiterAdminChatsComponent,],imports: [
    CommonModule,providers: [
    SocketService
  ]
})
export class AppModule {}

此外，还应添加SocketService @Injectable

@Injectable()
export class SocketService {
}