订阅服务后的 Angular2 翻译答案

【问题标题】：Angular2 translation after subscribing to service订阅服务后的 Angular2 翻译
【发布时间】：2017-05-15 18:45:09
【问题描述】：

我有一个父组件，它有一个子组件，我想根据我从 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) 时发出一个事件，然后让管道订阅该事件，但这不起作用.. .

【问题讨论】：

标签： angular ng2-translate

【解决方案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)，并让所有组件订阅语言设置。

【讨论】：

据我了解，如果我使用 Subject 并发出，那么我会在我的所有组件中注入 translationService。我一直在寻找一种方法来将此逻辑保留在管道本身中，而不是注入服务并订阅每个组件中发出的主题。

【解决方案2】：

考虑使用APP_INITIALIZER 并在那里执行所有预引导配置。 SO上有很多例子，所以我不想在这里复制/粘贴。基本上，APP_INITIALIZER，如果设置正确（例如，它必须返回 1 个承诺，即使你必须执行 5 个后端请求），在第一个组件是 constructored 之前执行

【讨论】：