要在Angular 7中实现语言切换功能,可以使用@ngx-translate/core
库与localize-router
库的结合。以下是一个示例解决方案:
npm install @ngx-translate/core @ngx-translate/http-loader localize-router
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LocalizeRouterModule } from 'localize-router';
import { LocalizeRouterHttpLoader } from 'localize-router-http-loader';
import { AppComponent } from './app.component';
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
export function localizeLoaderFactory(http: HttpClient) {
return new LocalizeRouterHttpLoader(http, './assets/i18n/');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
LocalizeRouterModule.forRoot([
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomeModule'
}
], {
parser: {
provide: LocalizeParser,
useFactory: localizeLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Location } from '@angular/common';
import { LocalizeRouterService } from 'localize-router';
@Component({
selector: 'app-root',
template: `
{{ 'HOME.TITLE' | translate }}
`,
styles: []
})
export class AppComponent {
constructor(
private translate: TranslateService,
private location: Location,
private localize: LocalizeRouterService
) {
translate.setDefaultLang('en');
translate.use('en');
}
switchLanguage(language: string) {
this.translate.use(language);
this.localize.changeLanguage(language);
this.location.replaceState(this.localize.translateRoute(this.location.path()));
}
}
translate
管道来翻译文本:import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-home',
template: `
{{ 'HOME.WELCOME' | translate }}
{{ 'HOME.DESCRIPTION' | translate }}
`,
styles: []
})
export class HomeComponent {
constructor(private translate: TranslateService) { }
}
en.json:
{
"HOME": {
"TITLE": "Home",
"WELCOME": "Welcome to my website!",
"DESCRIPTION": "This is a sample application for language switching."
}
}
fr.json:
{
"HOME": {
"TITLE": "Accueil",
"WELCOME": "Bienvenue sur mon site Web!",
"DESCRIPTION": "Ceci est une application de démonstration pour le changement de langue."
}
}
de.json:
{
"HOME": {
"TITLE": "Startseite",
"WELCOME": "Willkommen auf meiner Webseite!",
"DESCRIPTION": "Dies ist eine Beispielanwendung zum Sprachwechsel."
}
}
这样,你就可以在Angular 7中实现语言切换功能了。通过点击按钮切换语言,应用程序