typescript 如何在Angular 2中启动应用时运行服务

6za6bjd0  于 2022-12-30  发布在  TypeScript
关注(0)|答案(6)|浏览(118)

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

//套接字.服务.ts

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

我知道SocketService的constructor()中的代码只有在组件使用SocketService时才开始运行。
通常app.ts中的代码如下所示:

//应用程序ts

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

但是,我希望这个服务在应用启动时运行,所以我做了一个技巧,在App的constructor()中添加private _socketService: SocketService,现在代码如下所示:

//应用程序ts(新)

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

现在它工作了。问题是SocketService的constructor()中的代码有时运行,有时不运行。那么我应该如何正确地做呢?

ndh0cuux

ndh0cuux1#

Stuart的答案是正确的,但是要找到APP_INITIALIZER的信息并不容易。简单来说,你可以在其他应用程序代码运行之前使用它来运行初始化代码。我搜索了一会儿,找到了herehere的解释,我将总结一下,以防它们从Web上消失。
APP_INITIALIZER是在angular/core中定义的。你可以像这样把它包含在你的app.module.ts中。

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

APP_INITIALIZER是引用ApplicationInitStatus服务的OpaqueToken(或自Angular 4起的InjectonToken)。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()方法花费多少时间,这都会增加应用的前期加载时间。如果您想避免这种情况,可以在路由中使用解析器。

omvjsjqw

omvjsjqw2#

SocketService构造函数中的逻辑移到方法中,然后在主组件的构造函数或ngOnInit中调用该方法

套接字服务

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

应用程序

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

bbuxkriu3#

另请参见APP_INITIALIZER,其描述为:
在应用程序初始化时将执行的一种函数。

5kgi1eie

5kgi1eie4#

    • 套接字服务ts**
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SocketService {
  init() {
    console.log("socket service initialized");
  }
}
    • 应用程序组件. ts**
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();
  }
}
cgvd09ve

cgvd09ve5#

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

希望这个有用。

epfja78i

epfja78i6#

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

相关问题