Angular使翻译全球化

Question

I use TranslateService from @ngx-translate and every tutorial I found is pretty much the same.

The problem is.. I have in root AppComponent this:

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {
    translate.addLangs(["en", "fr"]);
    translate.setDefaultLang('en');

    let browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}

In header event which change language:

<select #langSelect (change)="translate.use(langSelect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>

and I want this to be global, the change event to propagate into my all modules, components etc. Is there a way to do that, or I must inject this service every place I use it?

Thanks.

Answer 1

您需要将其包装在模块中并包含在每个页面中，或者您可以将该组件完全隔离在不同的控制器中，并将其作为标题的一部分进行渲染，以便从布局中进行渲染。