Angular 2에서 앱을 시작할 때 서비스를 실행하는 방법

Angular 2에서 앱을 시작할 때 서비스를 실행하는 방법

서비스 Socket Service를 만들었습니다.기본적으로 소켓을 초기화하여 앱이 포트에서 리슨할 수 있도록 합니다.이 서비스는 일부 컴포넌트와도 상호 작용합니다.

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

이제 됐다.이 문제는 Socket Service의 컨스트럭터()의 코드가 실행되는 경우도 있고 실행되지 않는 경우도 있습니다.그럼 어떻게 하면 좋을까요?

Stuart의 답변은 올바른 방향을 가리키고 있지만 APP에서 정보를 찾는 것은 쉽지 않습니다.이니셜라이저즉, 다른 애플리케이션 코드가 실행되기 전에 초기화 코드를 실행할 수 있습니다.잠시 검색해 본 결과, 이쪽과 이쪽에서 설명을 찾을 수 있었습니다.웹에서 사라지면 어떻게 되는지 정리하겠습니다.

APP_INITIALIZER는 angular/core에 정의되어 있습니다.이렇게 app.module.ts에 포함시키면 됩니다.

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

APP_INITIALIZER는 OpaqueToken(또는 주입)입니다.응용 프로그램을 참조하는 Angular 4 이후의 토큰InitStatus 서비스어플InitStatus는 멀티 프로바이더입니다.여러 종속성을 지원하며 공급자 목록에서 여러 번 사용할 수 있습니다.이렇게 쓰입니다.

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

이 공급자 선언은 응용 프로그램에 대해 알려줍니다.InitStatus 클래스에서 DictionaryService.load() 메서드를 실행합니다.load()는 약속과 응용 프로그램을 반환합니다.InitStatus는 약속이 해결될 때까지 앱 시작을 차단합니다.load() 함수는 다음과 같이 정의됩니다.

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

사전이 먼저 로드되고 앱의 다른 부분은 안전하게 사용할 수 있도록 설정합니다.

편집: load() 메서드가 걸리는 시간만큼 앱의 초기 로드 시간이 길어집니다.이를 회피하려면 루트 상에서 리졸버를 대신 사용할 수 있습니다.

로직의 이동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]);

「APP_」도 참조해 주세요.INITIALIZER, 설명:

응용 프로그램 초기화 시 실행되는 함수입니다.

socket.service.ts

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

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

app.component.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();
  }
}

서비스 컨스트럭터를 생성하여 컴포넌트의 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;
        });   
  }  
}       

도움이 되길 바랍니다.

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

언급URL : https://stackoverflow.com/questions/35191617/how-to-run-a-service-when-the-app-starts-in-angular-2