Angular国际化与数据库REST调用返回双语内容

Question

我正在将我的双语web应用程序转换为Angular。在这个界面中，用户可以选择他们想要查看的内容，一旦选择，数据就会从REST api加载，该api连接到SQL数据库中。它的设置方式是数据库调用以两种语言返回内容。例如，TableComponent的JSON响应将是:

GET /api/tables/1
{
"title": "Hello",
"titleFr": "Bonjour",
"time": "05:23 PM",
"timeFr": "17:23",
"content": "I am a grapefruit",
"contentFr": "Je suis un pamplemousse"
}

不同的组件接收不同的值，但总是用于两种语言。一次只显示一种语言，但顶部有一个按钮，允许用户立即切换内容的语言。据我所知，要有这种行为，我应该使用ngx-translate。作为一个新手，我不知道从哪里开始。我读了一些文档;这听起来像是我要么有内容和它的翻译JSON文件捆绑应用程序，或者我使HTTP调用数据库返回翻译后的内容。

这两种方法都不适用于我当前的设置。如前所述，所有数据库调用都返回两种语言的文本，而不是将它们分开。有没有一种方法可以在不拆分它们的情况下实现本地化?

我这样做的原因是在我的原始实现中，我从数据库中加载了所有数据，并根据所选择的语言选择要显示的HTML模板。例如，对于TableComponent，如果选择英语，则模板将使用title, time, content，如果选择法语，则使用titleFr, timeFr, contentFr。要让我的所有组件都知道当前的语言并检测语言的变化有点麻烦，这就是我想利用国际化库的原因。

我这样做的原因是我的web应用程序意味着在两种语言中使用。也就是说，用户会有规律地来回切换。因此，我想减少http请求。当他们获取数据时，他们将拥有两种语言的内容。这将使切换非常快。

Answer 1

我建议将它们拆分，并使用Angular的i18n模块(参见此页)。如果严格要求不拆分它们，我建议创建一个翻译服务，这样您的组件就可以调用该服务，以提供要使用的语言。比如:

translation.service.ts

@Injectable()
export class TranslationService {
constructor() {}
async public getTranslation(language: string): Observable<any> {
// Get your text from database (assuming it's an Observable)
return db.get().pipe(
map(translations => {
// Just a suggestion, you can also have a mapping for better syntax
if (language === 'french') {
return {
title: translations.titleFr,
time: translations.timeFr,
content: translations.contentFr
}
}
// Otherwise, return default language
return {
title: translations.title,
time: translations.time,
content: translations.content
}
}),
// You can add shareReplay from rxjs/operators to cache results
shareReplay(1)
);
}
}

然后在你的组件中，你就可以从这个服务中访问数据，并利用Angular的模块化。

component.ts

import { Component, OnInit } from '@angular/core';
import { TranslationService } from './path-to/translation.service';
@Component({
selector: 'some-component',
templateUrl: './some.component.html',
styleUrls: ['./some.component.scss']
})
export class SomeComponent implements OnInit {
public texts: {
title: string;
time: string;
content: string;
}
constructor(
private readonly translationService: TranslationService
) { }
ngOnInit() {
this.translationService.getTranslations('french').subscribe(result => this.texts = result);
}
}

这样，您的组件甚至不知道文本的内容，您的服务负责处理翻译，并且它很容易扩展到更多的语言。