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并在那里执行所有预引导配置。 SO上有很多例子，所以我不想在这里复制/粘贴它们。基本上，APP_INITIALIZER，如果设置正确（例如，它必须返回1个承诺，即使你必须执行5个后端请求），也会在第一个组件constructor之前执行

订阅服务

2 个答案: