当应用程序以角度2启动时,如何运行服务

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

//socket.service.ts

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

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

通常 app.ts 中的代码是这样的:

//应用程式

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

但是,我希望这个服务在应用程序启动时运行。因此,我做了一个技巧,只需在 App 的构造函数()中添加 private _socketService: SocketService。现在代码是这样的:

//app.ts (新增)

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

现在成功了。问题在于 SocketService 的构造函数()中的代码有时运行,有时则不运行。那么我应该怎么做才正确呢?谢谢

104671 次浏览

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]);

尝试创建服务构造函数,然后在组件的 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;
});
}
}       

希望这个能帮上忙。

也请参阅 应用程序初始化器,它被描述为;

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

Stuart 的答案指向了正确的方向,但是要找到关于 APP _ INITIALIZER 的信息并不容易。简而言之,您可以使用它在运行任何其他应用程序代码之前运行初始化代码。我搜索了一会儿,找到了解释 给你给你,我将总结,以防它们从网上消失。

APP _ INITIALIZER 是在 angle/core 中定义的。

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

APP _ INITIALIZER 是引用 ApplicationInitStatus 服务的 OpaqueToken(或 Angular 4以来的 InjectionToken)。ApplicationInitStatus 是 多供应商。它支持多个依赖项,您可以在提供程序列表中多次使用它。它是这样使用的。

@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 ()方法花费多长时间,这都会增加应用程序的预先加载时间。如果你想避免这种情况,你可以在你的路线上使用 解析器

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: { } };

Socket.service.ts

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


@Injectable({
providedIn: 'root',
})
export class SocketService {
init() {
console.log("socket service initialized");
}
}

应用程序组件

import { Component } from '@angular/core';
import {SocketService} from './socket.service';


@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor(private _socketService: SocketService) {
this._startupService.init();
}
}