订阅服务后的Angular2翻译

Question

我有一个包含子组件的父组件，我想根据从 api.

获取的用户语言翻译文本

这是我的翻译管道转换方法：

transform(value : string, args: any[]) : any
{   
    if (!value) return ;
    return this._translationService.translate(value) ;
}

翻译服务

export class TranslationService {

    private _currentLang: string = 'en';

    public use(langId: number): void { 
        this._currentLang =  langId == 0 ? 'fr' : 'en';
    }


    public translate(key: string) {
        //tranlsation happens here

    }
}

这是在 ngOnInit() 中获取 langId 的父组件

ngOnInit() : void 
{

    this._langService.getLanguageId(this.userId)
                     .subscribe( langId=> { this._translationService.use(langId); });
    }

}

在父子组件模板中，我会像这样使用管道：

  <div >{{ 'Caption_Key' | translation }}</div>

设置翻译服务的langId前，子组件正在翻译字幕。但是，父组件翻译工作正常。我看到调用是异步的，但我如何确保子组件在转换发生之前具有正确的语言。

我尝试使用 EventEmitter 并在服务中调用 use(langId) 时发出一个事件，然后让管道订阅该事件，但是那没有用...

Answer 1

如果子组件依赖于翻译才能正常运行，那么可能值得考虑在了解该语言之前不实例化子组件。

this._langService.getLanguageId(this.userId)
  .subscribe(langId => { 
    this._translationService.use(langId);
    this.translationSet = true; 
  });
}

<child-component *ngIf="translationSet"></child-component>

编辑：

一种更具可扩展性的方法是让 this._translationService.use 在设置语言后执行 translationSubject.emit(language)，并让所有组件订阅语言设置。

Answer 2

考虑使用 APP_INITIALIZER 并在那里执行所有 bootstrap 之前的配置。 SO 上有大量示例，因此我不想在此处 copy/paste 那些。基本上，APP_INITIALIZER，如果设置正确（例如它必须 return 1 promise，即使你必须执行 5 个后端请求），在第一个组件被 constructored

订阅服务后的Angular2翻译

Angular2 translation after subscribing to service

ng2-translate

angular