Angular2 & WebApi (SPA) 用于企业应用 - 第 4 部分 - 多语言 (i18n)

tranthanhtu.vn

3.93/5 (11投票s)

2016年10月25日

CPOL

3分钟阅读

48051

在本文中，我们将学习如何在 Angular2 中使用多语言 (i18n)。

从Github下载源代码

系列中的其他文章

引言

我在网上搜索过。其他人已经贡献了他们关于 Angular2 多语言的解决方案。

看看我的代码。我对此情况有另一个解决方案，它在 ts 代码或 html 文件中看起来都更容易使用。

如何获取代码

请查看此代码：https://github.com/techcoaching/TinyERP。

如何使用代码

查看“<root>/app/modules/security/role/addRole.html”，我们可以看到以下 HTML

<page>
    <page-header>
        {{i18n.security.addOrUpdateRole.title}}
    </page-header>
    <page-content>
        <form-default>
            <form-text-input [placeHolderText]=i18n.security.addOrUpdateRole.inputName 
            [labelText]=i18n.security.addOrUpdateRole.name
                [validation]="['security.addOrUpdateRole.validation.nameIsRequire',
                'security.addOrUpdateRole.validation.keyAlreadyExisted']"
                [(model)]=model.name>
            </form-text-input>
            <form-textarea [placeHolderText]=i18n.security.addOrUpdateRole.inputDesc 
            [labelText]=i18n.security.addOrUpdateRole.desc [(model)]=model.description>
            </form-textarea>

            <form-permission-select [(values)]=model.permissions 
            [placeHolderText]=i18n.security.addOrUpdateRole.inputPermissions 
            [labelText]=i18n.security.addOrUpdateRole.permission
                [(model)]=model.permissions>
            </form-permission-select>

            <form-footer>
                <button id="save" 
                (click)="onSaveClicked($event)" type="button" 
                 class="btn btn-primary">{{i18n.common.form.save}}</button>
                <button id="cancel" 
                (click)="onCancelClicked($event)" type="button" 
                 class="btn btn-default">{{i18n.common.form.cancel}}</button>
            </form-footer>
        </form-default>
    </page-content>
</page>

在此 HTML 中，我们使用了一些来自 locale 文件中的文本，例如：i18n.security.addOrUpdateRole.inputName、i18n.security.addOrUpdateRole.name，等等。

这些文本有一个约定，它们的格式是：i18n.<moduleName>.<page name>.<field name>。例如，“i18n.security.addOrUpdateRole.name”表示这是 security 模块中 addOrUpdateRole 页面上 name 字段的文本。

为了更好地理解 moduleName，请参阅 Angular2 & WebApi(SPA) 企业应用 - 第 3 部分 - 项目结构。

这些值的来源位于“<root>/app/resosurces/locales/<moduleName>.<language>.json”中，例如 security.en.json 将包含在 security 模块中使用的所有 English 语言文本。

有关我如何实现此功能的更多信息，请查看“<root>/app/models/ui/baseComponent.ts”（用于 i18nHelper 和 i18n 属性）。