생성자 함수가 한 번만 실행되는지 어떻게 확인할 수 있습니까?

Question

내 서비스 TranslatorService의 생성자에서이 코드가 모든 응용 프로그램이나 on demande에 대해 한 번만 호출되며 모든 시간이 homecomponent가 아닌 경우로드가 수행되는 방법이 있습니까 ???? ???? 대한

this.translations$ = translationsCollection.snapshotChanges().map(actions => { 
     return actions.map(a => { 
     ... 
     }) 

번역 클래스 내 경우 FireStore의 예에서 PIN이 번역 :

{ 
    "WELCOME": { 
    "FR": "bienvenue", 
    "GB": "Welcome" 
} 
} 

export interface Translation { 
    [code: string]: TranslationInfo; 

} 

export interface TranslationInfo { 
    [language: string]: string; 
} 

내 핵심 모듈 appmodule 주입

import { NgModule } from '@angular/core'; 
import { AuthService } from './auth.service'; 
import { AngularFireAuthModule } from 'angularfire2/auth'; 
import { AngularFirestoreModule } from 'angularfire2/firestore'; 
import { TranslatorService } from '../services/translator.service'; 
@NgModule({ 
imports: [ 
    AngularFireAuthModule, 
    AngularFirestoreModule 
], 
providers: [AuthService, TranslatorService] 
}) 
export class CoreModule { } 

@NgModule({ 
declarations: [ 
... 

], 
imports: [ 
... 
    CoreModule, 
... 
], 
providers: [AuthGuard], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

내 통역 서비스

@Injectable() 
export class TranslatorService { 

    translationsCollection: AngularFirestoreCollection<Translation>; 
    translations$: Observable<any>; 
    public translations: Translation[]; 

    constructor(private afs: AngularFirestore) { 
    var translationsCollection = this.afs.collection("translations"); 
    this.translations$ = translationsCollection.snapshotChanges().map(actions => { 
     return actions.map(a => { 
     ... 
     }) 
    }); 

내 구성 요소

export class HomeComponent implements OnInit { 
translations$: Observable<any>; 
constructor(private translator: TranslatorService) { } 

ngOnInit() { 
    this.translations$ = this.translator.translations$; 
} 

내 구성 요소보기

<div *ngFor="let translation of translations$|async"> 
<pre>{{translation | json}}</pre> 
</div> 

Answer 1

내 프로젝트 중 하나에서 비슷한 일을했다. 번역 코드를 위의 한 수준으로 옮기면됩니다. 즉

모든 구성 요소를 래핑하고 논리를 넣는 변환 구성 요소라는 구성 요소를 만듭니다. 그렇게하면 응용 프로그램 수명주기 동안 한 번만로드됩니다.

const routes: Routes = [ 
    { 
     path: '', component: LanguageComponent, 
     children: [ 
      { path: '', component: HomeComponent }, 
      { path: 'login', component: LoginComponent }, 
     ] 
    } 
]; 

은 기본적으로 모든 응용 프로그램 언어 구성 요소에 싸여 다음과 같이

당신 경로 설정은 보일 것이다.

Answer 2

코드를 정적 함수로 옮기고 그 결과를 정적 필드에 저장하십시오. 생성자는 코드를 실행하기 전에 필드를 검사 할 정적 함수를 호출하기 만합니다.

export class TranslatorService { 

    translationsCollection: AngularFirestoreCollection<Translation>; 
    translations$: Observable<any>; 

    static tCollection : AngularFirestoreCollection<Translation>; 
    static t$: Observable<any>; 
    static initialize(afs: AngularFireStore) : void { 
    if (TranslatorService.tCollection == null) { 
     TranslatorService.tCollection = afs.collection("translations"); 
     TranslatorService.t$ = TranslatorService.tCollection.snapshotChanges().map(actions => actions.map(a => ...)); 
    } 
    } 

    public translations: Translation[]; 

    constructor(private afs: AngularFirestore) { 
    TranslatorService.initialize(this.afs); 
    this.translations$ = TranslatorService.t$; 
    this.translationsCollection = TranslatorService.tCollection; 
    } 
}