Angular 5更改检测未触发useValue提供的提供者

时间:2018-06-21 03:54:58

标签: angular typescript

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

为解决此问题,我使用keyboard = [[InlineKeyboardButton("Option 1", callback_data='1'), InlineKeyboardButton("Option 2. Long text here. Long text here. Long text here.", callback_data='2'), InlineKeyboardButton("Option 3", callback_data='3')]] reply_markup = InlineKeyboardMarkup(keyboard) update.message.reply_text('Please choose:', reply_markup=reply_markup) 字段提供了它们,如下所示:

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) { } } 的用例。这是个小问题,但是如果有正确的方法可以解决,那么我很想找出答案。

我确定问题将会出现:“为什么不直接使用服务?”我们大量使用此代理模式,以使我们可以交换服务实现而不必更改组件。

1 个答案:

答案 0 :(得分:0)

尝试使用工厂提供程序

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

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


@NdModule({
providers: [ dataServiceProvider ]
})