1

我有一个父组件，它有一个子组件，我想根据我从 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 之前翻译字幕。但是，父组件翻译工作正常。我看到调用是异步的，但是我如何确保子组件在转换发生之前具有正确的语言。

我尝试在服务中调用use(langId)EventEmitter时使用并发出事件，然后让管道订阅该事件，但这不起作用......

4

2 回答 2

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)设置语言后进行操作，并让所有组件订阅语言设置。

于 2017-05-15T19:00:58.357 回答
1

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

于 2017-05-15T20:23:08.153 回答