angular4系列之国际化

最新推荐文章于 2023-10-11 17:41:47 发布

原创最新推荐文章于 2023-10-11 17:41:47 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

49 篇文章

订阅专栏

框架

11 篇文章

订阅专栏

angular4

6 篇文章

订阅专栏

本文介绍了一种用于前端应用的国际化翻译配置方法，包括文件结构、JSON格式的具体内容以及如何在HTML和TS文件中使用这些翻译资源。通过示例展示了如何进行国际化设置，使应用程序能够支持多种语言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

国际化翻译目录及格式

src — assets — i18n — cn-zh.json
格式：

{
   "index": {
        "title": "标题"
    },
     "usermanage": {
        "logMangement": {
            "logman": {
                "name": "日志",
                "designation":"名称",
                "selectDate":"选择日期",
                "hint1":"请输入用户名称",
                "hint2":"请输入模块名称",
                "startDate":"开始日期",
                "endDate":"结束日期",
                "zhi":"至",
                "time":"时间",
                "operationCxt":"操作内容",
                "modelName":"模块",
                "hint3":"没有您搜索的记录",
                "hint4":"开始时间不能大于结束时间",
                "serial":"序号",
                "email":"邮箱"
            }
        }
    }
}

用法

1.
<div translate>{{'usermanage.logMangement.logman.name'}}</div>

2. 
<input placeholder="{{'usermanage.logMangement.logman.hint1' | translate}}" [(ngModel)]="userName" />

3.
<nz-datepicker [(ngModel)]="beginDate" [nzPlaceHolder]="'usermanage.logMangement.logman.time' | translate"></nz-datepicker>

4.
html文件中：
<th nz-th *ngFor="let col of table">
    <span>{{col.name | translate}}</span>
</th>
component.ts文件中：
 this.table = [{name:'usermanage.logMangement.logman.designation'  // 名称}]

5.ts文件中
this.translate.instant('iotapp.equStatus.realtime.excavator.overLoad');