当应用程序在 Angular 2 中启动时如何运行服务

Question

我创建了一个服务SocketService，基本上它初始化套接字让应用程序监听端口。该服务还与一些组件交互。

// socket.service.ts

export class SocketService {
    constructor() {
        // Initializes the socket
    }
    ...
}

我知道 SocketService 的 constructor() 中的代码只有在组件使用 SocketService 时才开始运行。

通常 app.ts 中的代码如下所示：

// app.ts

import {SocketService} from './socket.service';
...
class App {
    constructor () {}
}
bootstrap(App, [SocketService]);

但是，我希望在应用启动时运行此服务。所以我做了一个技巧，在App的constructor()中添加private _socketService: SocketService。所以现在代码看起来像这样：

// app.ts（新）

import {SocketService} from './socket.service';
...
class App {
    constructor (private _socketService: SocketService) {}
}
bootstrap(App, [SocketService]);

现在可以了。问题有时是 SocketService 的 constructor() 中的代码运行，有时不是。那么我应该如何正确地做到这一点呢？谢谢

Answer 1

Stuart 的回答指出了正确的方向，但在 APP_INITIALIZER 上查找信息并不容易。简短的版本是您可以在任何其他应用程序代码运行之前使用它来运行初始化代码。我搜索了一段时间，找到了here和here的解释，我会总结一下，以防它们从网络上消失。

APP_INITIALIZER 在 angular/core 中定义。你像这样将它包含在你的 app.module.ts 中。

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

APP_INITIALIZER 是一个引用 ApplicationInitStatus 服务的 OpaqueToken（或 Angular 4 以来的 InjectionToken）。 ApplicationInitStatus 是一个multi provider。它支持多个依赖项，您可以在提供程序列表中多次使用它。它是这样使用的。

@NgModule({
  providers: [
    DictionaryService,
    {
      provide: APP_INITIALIZER,
      useFactory: (ds: DictionaryService) => () => return ds.load(),
      deps: [DictionaryService],
      multi: true
    }]
})
export class AppModule { }

此提供程序声明告诉 ApplicationInitStatus 类运行 DictionaryService.load() 方法。 load() 返回一个承诺，ApplicationInitStatus 会阻止应用程序启动，直到承诺解决。 load() 函数是这样定义的。

load(): Promise<any> {
  return this.dataService.getDiscardReasons()
  .toPromise()
  .then(
    data => {
      this.dictionaries.set("DISCARD_REASONS",data);
    }
  )
}

设置为首先加载字典，应用程序的其他部分可以安全地依赖它。

编辑：请注意，无论 load() 方法花费多长时间，这都会增加您的应用程序的前期加载时间。如果你想避免这种情况，你可以在你的路线上使用resolver。

Answer 2

将 SocketService 构造函数中的逻辑移到一个方法中，然后在主组件的构造函数或 ngOnInit 中调用它

SocketService

export class SocketService{
    init(){
        // Startup logic here
    }
}

应用程序

import {SocketService} from './socket.service';
...
class App {
    constructor (private _socketService: SocketService) {
        _socketService.init();
    }
}
bootstrap(App, [SocketService]);

Answer 3

另见APP_INITIALIZER，其描述为；

应用程序初始化时将执行的函数。

Answer 4

尝试创建服务构造函数，然后在组件的 ngOnInit() 中调用它。

• 服务模块

 export class SocketService {
    constructor() { }
        getData() {
            //your code Logic
        }
}

• 组件

export class AppComponent {
    public record;  
    constructor(private SocketService: DataService){ }
    ngOnInit() {        
        this.SocketService.getData()
        .subscribe((data:any[]) => {
            this.record = data;
        });   
  }  
}       

希望对您有所帮助。

Answer 5

in config.teml.json
{Domain:'your url'}

in app.module.ts

import * as mydata from '../assets/config.teml.json';
const data:any=(mydata as any).default;
let config: SocketIoConfig = { url: data.Domain, options: { } };