如何更改我的"language.json“文件(键和值)而不必重新编译angular应用程序？

Question

我刚刚安装了ngx-translate模块，它正在工作，我的问题是:在我部署我的angular 4应用程序后，我如何才能更改json文件(键和值)，而不必重新编译和重新开发。

每个例子:我当前的'en.json‘文件：

{
    "hello": "Hello World"
}

我的app.module.ts：

<div>{{"hello" | translate}}</div>

在部署我的应用程序后，我想将"Hello World“更改为"Good Morning”，而无需重新编译和重新部署！如果可能的话

我的app.module：

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from "@angular/common/http";

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');

}

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent,
        LogoutComponent,
    ],
    imports: [
        HttpModule,
        // StoreModule.provideStore(createNetevenReducer, INITIAL_GLOBAL_APP_STATE),
        // StoreDevtoolsModule.instrumentOnlyWithExtension(),
        StoreModule.forRoot([]),
        EffectsModule.forRoot([]),
        !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 50 }) : [],
        BrowserModule,
        BrowserAnimationsModule, // required for ng2-tag-input
        CoreModule,
        LayoutModule,
        SharedModule.forRoot(),
        RoutesModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ],
    providers: [
        AuthHttp,
        {
            provide: AuthHttp,
            useFactory: authHttpServiceFactory,
            deps: [ Http, RequestOptions ]
        },
        AuthSecurityService,
        AuthenticationService,
        UserService,
        HttpClientModule,
    ],
    bootstrap: [AppComponent]

谢谢！

Answer 1

您可以使用多个language.json文件(en.json、de.json、fr.json)部署您的应用程序，并按如下方式切换它们：

constructor(private translate: TranslateService) {
    this.translate.use('en');
    // this.translate.use('fr');
    // ...
}