时间戳

首页 > 解决方案 > Angular 5 更改检测不会为提供 useValue 的提供程序触发

angular - Angular 5 更改检测不会为提供 useValue 的提供程序触发

问题描述

我有一个简单的 Angular 5 应用程序，它由几个组件和服务组成，这些组件和服务使用“代理”耦合在一起，“代理”只是一个具有多个 RXJS 主题字段的对象，可用于从系统接收状态或调用命令。正在提供这些服务，但由于没有直接注入它们的组件，它们永远不会被创建。

为了解决这个问题，我使用该useValue字段为他们提供，如下所示：

import { NgModule } from '@angular/core';
import { DataBroker } from './brokers/data.broker';
import { SystemBroker } from './brokers/system.broker';
import { NotificationBroker } from './brokers/notification.broker';
import { LoggerService } from './services/logger.service';
import { SocketService } from './services/socket.service';
import { DataService } from './services/data.service';
import { SystemService } from './services/system.service';

const systemBroker: SystemBroker = new SystemBroker();
const dataBroker: DataBroker = new DataBroker();
const notificationBroker: NotificationBroker = new NotificationBroker();
const loggerService: LoggerService = new LoggerService(systemBroker);
const socketService: SocketService = new SocketService(loggerService, systemBroker, notificationBroker);
const dataService: DataService = new DataService(loggerService, socketService, dataBroker);
const systemService: SystemService = new SystemService(loggerService, socketService, systemBroker);

@NgModule({
  providers: [
    { provide: SystemBroker, useValue: systemBroker },
    { provide: DataBroker, useValue: dataBroker },
    { provide: NotificationBroker, useValue: notificationBroker },
    { provide: LoggerService, useValue: loggerService },
    { provide: SocketService, useValue: socketService },
    { provide: DataService, useValue: dataService },
    { provide: SystemService useValue: systemService },
  ]
})
export class AppServicesModule {
  constructor() { }
}

这完成了创建实例的工作，但是我遇到了一个更痛苦的问题：在这些服务中接收并通过代理传递给组件的任何数据都不会启动更改检测。

编辑：根据要求，数据如何通过代理传递的示例（这只是一个示例片段，请记住，这个完全相同的代码适用于我的解决方法）：

...
@Injectable()
export class DataService {
  constructor(dataBroker: DataBroker, socketService: SocketService) {
    socketService.on('NETWORK_CONFIG', (value: NetworkConfiguration) =>
      dataBroker.networkConfiguration.status.next(value));
  }
}

如果我以典型方式提供这些对象，即：

import { NgModule } from '@angular/core';
import { DataBroker } from './brokers/data.broker';
import { SystemBroker } from './brokers/system.broker';
import { NotificationBroker } from './brokers/notification.broker';
import { LoggerService } from './services/logger.service';
import { SocketService } from './services/socket.service';
import { DataService } from './services/data.service';
import { SystemService } from './services/system.service';

@NgModule({
  providers: [
    SystemBroker,
    DataBroker,
    NotificationBroker,
    LoggerService,
    SocketService,
    DataService,
    SystemService
  ]
})
export class AppServicesModule {
  constructor(systemBroker: SystemBroker
              dataBroker: DataBroker,
              notificationBroker: NotificationBroker,
              loggerService: LoggerService,
              socketService: SocketService,
              dataService: DataService,
              systemService: SystemService) { }
}

然后一切都按预期工作。我可以将此用作解决方法，但我想了解useValue它在这种情况下是否不起作用的用例。这是一个小问题，但如果有正确的方法可以做到这一点，那么我很想弄清楚。

我相信问题会出现：“为什么不直接使用服务？” 我们经常使用这种代理模式来允许我们更换服务实现而无需更改我们的组件。

标签： angulartypescript

解决方案

尝试使用工厂提供程序

let dataServiceFactory = (dataBroker: DataBroker, socketService: SocketService) => { return new DataBroker(dataBroker, socketService); };

export let  dataServiceProvider= { provide: DataService, useFactory: dataServiceFactory, deps: [DataBroker, SocketService] };


@NdModule({
providers: [ dataServiceProvider ]
})

推荐阅读