angular4系列之国际化

最新推荐文章于 2024-06-22 09:30:14 发布

玉米_欣

最新推荐文章于 2024-06-22 09:30:14 发布

阅读量2.1k

点赞数 1

分类专栏：前端框架 angular4

本文链接：https://blog.csdn.net/u012967849/article/details/78767201

版权

前端同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

框架

11 篇文章 0 订阅

订阅专栏

angular4

6 篇文章 0 订阅

订阅专栏

国际化翻译目录及格式

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');