如何适应我的代码在TranslateModule.forRoot

Question

我从一个朋友那里得到了这个项目，实际上，我只需要创建一个多语言。

在HTML中，我创建了这个:

<div class="languageSelect" style="color: aqua;">
<a (click)="switchLang('nl')">NL</a>
<span> | </span>
<a (click)="switchLang('en')">EN</a>
<span> | </span>
</div>

在TS

我的代码

constructor(
public _router: Router,
private LS: LocalStoreService,
public _location: Location,
private translate: TranslateService ) {
translate.addLangs(['en', 'nl', 'fr']);
translate.setDefaultLang('en');
}

switchLang(lang: string) {
this.translate.use(lang);
console.log(42);
}

现在还好…现在，我要创建一个TranslateModule.forRoot({

我想添加以下代码

TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpTranslateLoader,
deps: [HttpClient]
}
})
] /,

但是，我怎么能用下面我朋友的代码改编我的代码呢?

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })],
exports: [RouterModule]
})

Answer 1

只需添加"，"最后，导入新的模块。

改变

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })],
exports: [RouterModule]
})

@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' }),
TranslateModule, /*<--- Don't forget to import this too*/
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
],
exports: [RouterModule]
})

编辑 =================================我和你分享一些代码，也许你可以解决你的问题。正如我在下面评论的那样，您需要在assets/i18n文件夹中创建一个json文件，其名称与您在语言配置中使用的名称完全相同。在我的例子中，'lang_english.json'

app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LangSelectorComponent } from './components/common/lang-selector/lang-selector.component';

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

@NgModule({
declarations: [
LangSelectorComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule.forRoot(ROUTES),
TranslateModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [
HttpClient
],
bootstrap: []
})
export class AppModule {}

lang-selector.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LanguagesService } from 'src/app/_services/languages.service';
@Component({
selector: 'app-lang-selector',
templateUrl: `
<div class="btn-group pull-right" *ngIf="!inline">
<button type="button" class="btn btn-primary font-weight-bolder">{{langText}}</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<ul class="nav nav-hover flex-column">
<li class="nav-item" *ngFor="let lang of langs"><a href="javascript:void(0)" (click)="change_lang(lang.id)" class="nav-link"><span class="nav-text">{{lang.name}}</span></a></li>
</ul>
</div>
</div>
<div class="div" *ngIf="inline">
<a href='javascript:void(0)' (click)="change_lang('lang_english')">English</a> / <a href='javascript:void(0)' (click)="change_lang('lang_spanish')">Spanish</a>  
</div>
`
})
export class LangSelectorComponent implements OnInit {
@Input() inline:boolean = false;
langText:string = 'English';
langs = [
{name:'English',id:'lang_english'},
{name:'Spanish',id:'lang_spanish'},
]
constructor( private translateService: TranslateService, private languageService: LanguagesService ) { }
ngOnInit(): void {
this.languageService.language.subscribe( lang => {
if ( lang !== 'lang_english' ) this.langText = 'Spanish';
else this.langText = 'English';
})
}
change_lang( id:string ){
this.languageService.change_lang( id );
}
}

languages.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
@Injectable({
providedIn: 'root'
})
export class LanguagesService {
private languageBehavior: BehaviorSubject<string>;
public language: Observable<string>;
constructor(private api: HttpClient, private translateService: TranslateService) {
this.languageBehavior = new BehaviorSubject<string>(localStorage.getItem('lang') || 'lang_english');
this.language = this.languageBehavior.asObservable();
this.translateService.setDefaultLang(this.languageBehavior.value);
this.translateService.use(this.languageBehavior.value);
}
get selectedLang(){return this.languageBehavior.value};
change_lang(  id:string ){
this.languageBehavior.next(id);
localStorage.setItem('lang', id);
this.translateService.use(id);
}
}