Angular 2让它等待服务初始化

我有一个管道解析消息密钥并相应地返回消息到语言环境。Angular 2让它等待服务初始化

但我想角等待直到我的服务将完成它的加载消息，并且只有在那之后继续呈现主页面。我的本地化管道在哪里使用。如何让它工作？

服务：

@Injectable() 
export class I18nService implements OnInit { 

    private cachedMessages: {string: string}; 

    activeLocale:I18Enum = null; 

    constructor(private http: Http) { 
     this.reloadLocale(I18Enum.ru); 
    } 

    ngOnInit(): void { 
     this.reloadLocale(I18Enum.ru); 
    } 

    getMessage(key: string) { 
     if (this.cachedMessages) { 
      return this.cachedMessages[key]; 
     } 
    } 

    reloadLocale(locale: I18Enum) { 
     this.activeLocale = locale; 
     this.http.get(basePath + i18nPath + I18Enum[locale]).subscribe(
      res => { 
       this.cachedMessages = res.json(); 
      } 
     ); 
    } 
}

和管道：

@Pipe({name: 'i18nPipe'}) 
export class I18nPipe implements PipeTransform { 

    constructor(private i18Service: I18nService) { 
    } 

    transform(value: any, args: any): any { 
     return this.i18Service.getMessage(value); 
    } 

}

来源

2016-11-14 Simon

可能复制[如何将从后端呈现的参数传递给angular2引导方法]（http://stackoverflow.com/questions/37611549/how-to-pass-parameters-rendered -from-后端到angular2的自举方法） – estus

确定。最后我让它工作。我找到了这个答案，它帮助了我。 https://stackoverflow.com/a/40379803/5203127

所以我的代码现在看起来如下：

服务：（加入的initMessages法）

@Injectable() 
export class I18nService { 

    private cachedMessages: {string: string} = null; 

    activeLocale: I18Enum = null; 

    constructor(private http: Http) { 

    } 

    getMessage(key: string) { 
     if (this.cachedMessages) { 
      return this.cachedMessages[key]; 
     } 
    } 

    reloadLocale(locale: I18Enum) { 
     this.activeLocale = locale; 
     this.http.get(basePath + i18nPath + I18Enum[locale]).subscribe(
      res => { 
       this.cachedMessages = res.json(); 
      } 
     ); 
    } 

    initMessages(locale: I18Enum) { 
     this.activeLocale = locale; 

     return new Promise((resolve, reject) => { 
      this.http.get(basePath + i18nPath + I18Enum[locale]).map(res => res.json()).catch((error: any): any => { 
       reject(false); 
       return Observable.throw(error.json().error || 'Server error'); 
      }).subscribe((callResult: {string: string}) => { 
       this.cachedMessages = callResult; 
       resolve(true); 
      }); 

     }); 
    } 
}

我举：（加入APP_INITIALIZER提供商）

@NgModule({ 
     imports: [..., HttpModule, ...], 
     declarations: [..., 
      I18nPipe 
     ], 
     bootstrap: [AppComponent], 
     providers: [..., I18nService, 
      { 
       provide: APP_INITIALIZER, 

      // useFactory: (i18NService: I18nService) =>() => i18NService.initMessages(I18Enum.ru), 
      // or 
      useFactory: initApp, 

      deps: [I18nService], 
      multi: true 
     } 
    ] 
}) 
export class TopJavaModule { 

} 

export function initApp(i18nService: I18nService){ 
    // Do initing of services that is required before app loads 
    // NOTE: this factory needs to return a function (that then returns a promise) 
    return() => i18nService.initMessages(I18Enum.ru); // + any other services... 
}

来源

2016-11-14 16:05:57 Simon

Angular 2让它等待服务初始化

回答

相关问题