angular - 如何仅在单击相应语言按钮时才加载 json 文件？

Question

我正在关注这个 tutorial在 Angular2 中实现翻译 - 它工作正常，但我只想在单击相应的语言按钮时加载 json 文件。有人可以帮忙吗？

// app/translate/translation.ts

import { OpaqueToken } from '@angular/core';

// import translations(I dont want to import all languages here)
import { LANG_EN_NAME, LANG_EN_TRANS } from './lang-en';
import { LANG_ES_NAME, LANG_ES_TRANS } from './lang-es';
import { LANG_ZH_NAME, LANG_ZH_TRANS } from './lang-zh';

// translation token
export const TRANSLATIONS = new OpaqueToken('translations');

// all translations
const dictionary = {
    [LANG_EN_NAME]: LANG_EN_TRANS,
    [LANG_ES_NAME]: LANG_ES_TRANS,
    [LANG_ZH_NAME]: LANG_ZH_TRANS,
};

// providers
export const TRANSLATION_PROVIDERS = [
    { provide: TRANSLATIONS, useValue: dictionary },
];





// app/translate/translate.service.ts

import {Injectable, Inject} from '@angular/core';
import { TRANSLATIONS } from './translations'; // import our opaque token

@Injectable()
export class TranslateService {
    private _currentLang: string;

    public get currentLang() {
        return this._currentLang;
    }

    // inject our translations
    constructor(@Inject(TRANSLATIONS) private _translations: any) {
    }

    public use(lang: string): void {
        // set current language
        this._currentLang = lang;
    }

    private translate(key: string): string {
        // private perform translation
        let translation = key;

        if (this._translations[this.currentLang] && this._translations[this.currentLang][key]) {
            return this._translations[this.currentLang][key];
        }

        return translation;
    }

    public instant(key: string) {
        // call translation
        return this.translate(key); 
    }
}




import {NgModule} from '@angular/core';
import {TRANSLATION_PROVIDERS} from './translations';
import {TranslatePipe} from './translate.pipe';
import { TranslateComponent} from './translate.component';
import { CommonModule }     from '@angular/common';
@NgModule({
    imports: [
        CommonModule
        // PaginatorModule
    ],
    declarations: [TranslatePipe,TranslateComponent],
    providers: [
        TRANSLATION_PROVIDERS
    ],
    exports: [TranslateComponent,TranslatePipe]
})

export class TranslationModule {}

更新 - 我关注了这个 tutorial将 ngx-translate 添加到我的项目中。但是我无法让它为延迟加载的子模块工作。有人可以帮我解决这个问题吗。

//我的代码不起作用 - 在应用程序模块中运行良好

import { NgModule }         from '@angular/core';
import { LoginComponent } from './login.component';
import { LoginRoutes } from './login.routing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http : HttpClient) {
    return new TranslateHttpLoader(http);
}
@NgModule({
    imports: [LoginRoutes,ReactiveFormsModule, CommonModule,
            HttpClientModule,
            TranslateModule.forChild({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient]
                },
            isolate: true      
            })],
    declarations:   [
        LoginComponent
    ]
})

export class LoginModule {

    constructor() {
    }
}

Answer 1

如果你使用@ngx-translate/core你可以使用LangChangeEvent加载相应的语言文件

从'@ngx-translate/core'导入{TranslateService, LangChangeEvent};

文档中有更多信息:https://www.npmjs.com/package/@ngx-translate/core