如何在Angular 2

时间:2016-02-04 02:50:28

标签: typescript angular

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

// socket.service.ts

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

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

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

// 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的构造函数()中的代码运行,有时不运行。那我该怎么做呢?感谢

4 个答案:

答案 0 :(得分:66)

斯图尔特的答案指向正确的方向,但在APP_INITIALIZER上找不到信息并不容易。简短版本是您可以在运行任何其他应用程序代码之前使用它来运行初始化代码。我搜索了一会儿,找到了herehere的解释,如果他们从网上消失,我将总结一下。

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

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

APP_INITIALIZER是引用ApplicationInitStatus服务的OpaqueToken。 ApplicationInitStatus是multi provider。它支持多个依赖项,您可以多次在提供程序列表中使用它。就像这样使用。

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

此提供程序声明告诉ApplicationInitStatus类运行DictionaryService.load()方法。 load()返回一个promise,ApplicationInitStatus阻止app启动,直到promise解析。 load()函数定义如下。

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

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

编辑:请注意,无论load()方法有多长,这都会增加app的前期加载时间。如果您想避免这种情况,可以在路线上使用resolver

答案 1 :(得分:47)

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

答案 2 :(得分:4)

另见APP_INITIALIZER,其描述为;

  

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

答案 3 :(得分:1)

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

希望这有助于。