@localization/l10n

纯 Angular 本地化（l10n）库。

演示

描述

这是一个用于本地化应用的 Angular 功能集（管道、指令、服务）。
兼容 Angular 2+ 版本
无外部依赖
支持一些最常用的本地化文件：.properties, .po, .json
按需加载本地化文件
轻松管理本地化存储
可定制本地化加载器

测试环境

Firefox（最新版）
Chrome（最新版）
Chromium（最新版）
Edge
IE11

安装/入门

npm install @localization/l10n

在您的应用模块中使用以下代码片段

import { L10nModule, L10nService, LanguageCodes } from '@localization/l10n';
...
...

@Injectable()
export class LocalizationResolve implements Resolve {

    constructor(private localization: L10nService){
        this.localization.languageChanges.subscribe(({ code }) => {
            this.localization.setFromFile(`${code}.locales.properties`);
        })
    }

    public resolve(): Observable|Promise {
        return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
    }
}

@NgModule({
    imports: [
        BrowserModule,
        L10nModule.forRoot({ config: { defaultLanguage: LanguageCodes.EnglishUnitedStates } }),
        RouterModule.forRoot([
            { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
        ])
    ],
    providers: [LocalizationResolve],
    bootstrap: [AppComponent]
})
export class AppModule {}

在您的组件中使用以下代码片段

import { L10nService } from '@localization/l10n';


@Component({
  ...
})
export class AppComponent {

  constructor(private localization: L10nService) {
  }
}

在您的模板中使用以下代码片段

<div l10n="app.hello.key" [l10n-args]="params"></div>
<div l10n="app.hello.key" [l10n-args]="{value: 'world'}"></div>
<div l10n="app.hello.key" l10n-args="{value: 'world'}"></div>

<div [l10n]="'app.hello.key'" [l10n-args]="params"></div>
<div [l10n]="'app.hello.key'" l10n-args="{value: 'world'}"></div>

<div>{{'app.hello.key' | l10n:param }}</div>
<div [innerHTML]="'app.hello.key' | l10n"></div>
<div>{{'app.hello.key' | l10n: {'key': 'value'} }}</div>

NativeScript

tns plugin add @localization/l10n

在您的应用模块中使用以下代码片段

import { L10nModule, L10nService, L10nBaseLoader } from '@localization/l10n';
import { knownFolders } from "file-system";
import { Subject, Observable, from } from 'rxjs';
import { map } from 'rxjs/operators';
import { Resolve } from "@angular/router";
...
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";
...
...

@Injectable()
export class CustomLoader extends L10nBaseLoader {

    private readonly folderName = 'locales'; // folder where you place your locale files, 
                                            // in our case that is locales/en.locales.properties
    private readonly documents = knownFolders.currentApp();
    private readonly folder = this.documents.getFolder(this.folderName);

    public getFile({ url, code }: IL10nFileRequest ): Observable<IL10nLoaderResponse> {
        let fileType = this.getFileExtension( url );                           
        let file = this.folder.getFile(url);

        return from(file.readText())
                .pipe(map((response) => {
                    return { response, fileType }
                }));
    }
}

@Injectable()
export class LocalizationResolve implements Resolve {

    constructor(private localization: L10nService){
        this.localization.languageChanges.subscribe(({ code }) => {
            this.localization.setFromFile(`${code}.locales.properties`);
        })
    }

    public resolve(): Observable|Promise {
        return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
    }
}

@NgModule({
    imports: [
        NativeScriptModule,
        L10nModule.forRoot({ 
            config: {defaultLanguage: LanguageCodes.EnglishUnitedStates, bindingProperty: 'text' },
            loader: CustomLoader
        }),
        NativeScriptRouterModule.forRoot([
            { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
        ])
    ],
    providers: [
        LocalizationResolve,
        L10nService, // because currently NativeScript doesn\'t work with @Injectable({ providedIn: \'root\' })
        CustomLoader
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

在您的模板中使用以下代码片段

<ActionBar title="{{ 'app.header.title' | l10n }}" class="action-bar"></ActionBar>
<ActionBar [title]="'app.hello.key' | l10n"></ActionBar>
<Label text="{{'app.hello.key' | l10n }}"></Label>
<Button text="{{'app.hello.key' | l10n }}" (tap)="onTap($event)"></Button>

如果配置中的 bindingProperty 设置为 text，l10 指令将使用它作为默认元素属性

<Label l10n="app.hello.key" [l10n-args]="params"></Label>
<Label l10n="app.hello.key" [l10n-args]="{value: 'world'}"></Label>
<Label l10n="app.hello.key" l10n-args="{value: 'world'}"></Label>

<Label [l10n]="'app.hello.key'" [l10n-args]="params"></Label>
<Label [l10n]="'app.hello.key'" l10n-args="{value: 'world'}"></Label>

开发

使用以下工具构建

Angular
RxJS

设置开发环境

本项目使用 Angular CLI 版本 6.0.7 生成。Angular CLI

在构建 L10n 项目之前，必须安装 Angular CLI。Angular CLI

npm install -g @angular/cli

git clone https://github.com/pIvan/l10n.git
cd l10n/
npm install
npm run start

在浏览器中打开 "https://127.0.0.1:4200"

版本管理

我们使用 SemVer 进行版本管理。有关可用版本的信息，请参阅此存储库的标签链接。

测试

本项目使用 Angular CLI 版本 6.0.7 生成。Angular CLI

在测试 L10n 项目之前，必须安装 Angular CLI。Angular CLI

npm install -g @angular/cli

git clone https://github.com/pIvan/l10n.git
cd l10n/
npm install
npm run test

贡献

想要帮忙吗？

想要提交错误报告、贡献代码或改进文档？太好了！阅读我们的贡献指南，然后查看我们的问题。

许可

L10n 可以在 MIT 许可证的条款下自由分发。MIT 许可证