วิธีเรียกใช้บริการเมื่อแอปเริ่มต้นใน Angular 2

ฉันสร้างบริการ SocketService โดยพื้นฐานแล้วจะเริ่มต้นซ็อกเก็ตเพื่อให้แอปฟังบนพอร์ต บริการนี้ยังโต้ตอบกับส่วนประกอบบางอย่าง

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

อย่างไรก็ตามฉันต้องการให้บริการนี้ทำงานเมื่อแอปเริ่มทำงาน ดังนั้นฉันจึงสร้างเคล็ดลับเพียงแค่เพิ่มตัวprivate _socketService: SocketServiceสร้างของแอพ () ตอนนี้รหัสมีลักษณะดังนี้:

// app.ts (ใหม่)

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

ตอนนี้ใช้งานได้แล้ว ปัญหาคือบางครั้งรหัสในตัวสร้างของ SocketService () ทำงานบางครั้งไม่ได้ แล้วจะทำอย่างไรให้ถูกต้อง? ขอบคุณ

คำตอบของ Stuart ชี้ไปในทิศทางที่ถูกต้อง แต่การค้นหาข้อมูลบน APP_INITIALIZER นั้นไม่ใช่เรื่องง่าย เวอร์ชันสั้นคือคุณสามารถใช้เพื่อเรียกใช้รหัสเริ่มต้นก่อนที่รหัสแอปพลิเคชันอื่น ๆ ของคุณจะทำงาน ฉันค้นหาอยู่พักหนึ่งและพบคำอธิบายที่นี่และที่นี่ซึ่งฉันจะสรุปในกรณีที่พวกเขาหายไปจากเว็บ

APP_INITIALIZER ถูกกำหนดเป็นเชิงมุม / แกน คุณรวมไว้ใน app.module.ts ของคุณเช่นนี้

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

APP_INITIALIZER เป็นOpaqueToken (หรือ InjectionToken ตั้งแต่ Angular 4) ที่อ้างถึงบริการ ApplicationInitStatus 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);
    }
  )
}

ตั้งค่าให้พจนานุกรมถูกโหลดก่อนและส่วนอื่น ๆ ของแอปจะขึ้นอยู่กับมันได้อย่างปลอดภัย

แก้ไข: โปรดทราบว่าสิ่งนี้จะเพิ่มเวลาในการโหลดล่วงหน้าสำหรับแอปของคุณโดยใช้เวลานานแค่ไหนในการโหลด () วิธีการ หากคุณต้องการหลีกเลี่ยงคุณสามารถใช้ตัวแก้ไขในเส้นทางของคุณแทน

ย้ายตรรกะในตัว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]);

โปรดดูAPP_INITIALIZERซึ่งอธิบายไว้ว่า;

ฟังก์ชันที่จะทำงานเมื่อแอปพลิเคชันเริ่มต้น

ลองสร้างตัวสร้างบริการแล้วเรียกมันใน 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;
        });   
  }  
}       

หวังว่านี่จะช่วยได้