Question

我正在研究离子应用。我想使用语言.json文件添加相同的多语言支持。所以我用Google搜索并找到了几个使用“angular static file loader plugin”加载文件的例子，但它一次加载所有语言文件。

我的问题是，我们可以加载用户选择的语言文件，以避免加载其他语言文件的额外时间。任何人都可以让我知道我怎样才能实现它？或者一次加载所有文件是更好的方法??或者我可以做更好的实施吗？

谢谢。

Answer 1

我的问题是，我们是否可以加载用户选择的语言文件，以避免加载其他语言文件的额外时间。

是

任何人都可以让我知道如何实现它？或者一次加载所有文件是更好的方法??或者我可以做更好的实施吗？

使用angular-translate和angular-translate-loader-url

在app.config()

中

$translateProvider.useUrlLoader('/translate');
$translateProvider.preferredLanguage('en_US');

这相当于请求/translate?lang=en_US，以便在您的应用初始化时获取特定语言（默认）。

稍后当您想要更改为其他语言时：

// Example in one of your controller
$translate.use('fr_FR');

这将触发请求/translate?lang=fr_FR以获取另一个翻译文件

我创建了语言的JSON文件为＆＃34; en.json＆＃34;在我的项目..我想使用该文件..所以可以使用上面的代码吗？

对于JSON文件，正如你的问题angular-translate-loader-static-files中所提到的那样（我不知道你为什么一次加载所有文件，因为它应该是延迟加载）

$translateProvider.useStaticFilesLoader({
    prefix: '',
    suffix: '.json'
});
$translateProvider.preferredLanguage('en');

这将加载en.json。

延迟加载另一个翻译文件。

$translate.uses('fr');

这将加载fr.json

Answer 2

在全球范围内更改语言的最佳方法是使用管道并将language参数作为参数发送。这将自动在使用语言管道的组件之间更改语言。以下示例可用于一次提供多种语言，并且可用于一次单击即可动态更改语言

// for example: **language.pipe.ts**

import { Pipe, PipeTransform, OnInit, OnChanges } from '@angular/core';
import { LanguageService } from '../services/language.service';

@Pipe({
    name: 'language'
})
export class LanguagePipe implements PipeTransform {

    constructor(
        public lang: LanguageService
    ) { }

    transform(value: string, args?: any): any {
        return this.lang.getLang(value);
    }
}


// **language.service.ts**

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class LanguageService {

    selectedLanguage = 'ch';
    segmentsNames: any = {};
    constantSegmentNames: any = {};
    language = {
        undefined: { 'en': '', 'ch': '' },
        null: { 'en': '', 'ch': '' },
        '': { 'en': '', 'ch': '' },
        'hello': { 'en': 'Hello', 'ch': '你好' },
        'world': { 'en': 'World', 'ch': '世界' }
    };

    constructor(private _http: HttpClient) { }

    getLang(value: string, args?: any): any {
        if (this.language[value]) {
            return this.language[value][this.selectedLanguage];
        }
        return value;
    }

    /**
     * @function that is used to toggle the selected language among 'en' and 'ch'
     */
    changeLanguage() {
        if (this.selectedLanguage === 'en') {
            this.selectedLanguage = 'ch';
        } else {
            this.selectedLanguage = 'en';
        }
    }
}


// **Use Language Pipe in HTML AS**

<strong>{{'hello' | language:lang.selectedLanguage}}{{'world' | language:lang.selectedLanguage}}</strong>

PS：不要忘记在要使用此功能的所有组件中导入管道和服务

结论：您可以编写自己的逻辑，以根据用户选择的语言获取相应的Language.json文件，并将其用于上述服务中

在Angular multilaguage中仅加载单语言JSON文件

2 个答案: