Angular学习记录4-修改默认区域

最新推荐文章于 2024-08-26 09:41:14 发布

EchoDSun

最新推荐文章于 2024-08-26 09:41:14 发布

阅读量466

点赞数

分类专栏：记录文章标签： angular

本文链接：https://blog.csdn.net/weixin_39513118/article/details/109641758

版权

37 篇文章 0 订阅

订阅专栏

2020年11月12日13:10:46

angular的默认区域是“en-US”，导致matDatepicker这个组件的界面都是英文，像是分页组件还可以找个翻译器，但是日期组件的不太好找orz；

其实Angular的官方是支持更换区域的，成为i18n，

介绍就是一小段，只说了导入localize 包，然后提示可以使用LOCALE_ID，最后也没说怎么用，看的一头雾水。

最后找到了一点点启示：

简单来说分三步：

1. 添加localize 包

ng add @angular/localize

2.在app.moudule.ts中引入LOCALE_ID

import { LOCALE_ID, NgModule } from '@angular/core';

3.在app.moudule.ts中设定区域，重点是添加注释1的这一行

  providers: [
    { provide: MatPaginatorIntl, useValue: myPaginator() },
    { provide: LOCALE_ID, useValue: 'zh-Hans' }    // 1
  ],

那么这个value是哪里来的呢？

里面文件的名字就是这个值，可以自行尝试。

结果：（汉化完成的日期选择器）

ps：官网也说了，这个语言只影响部分组件，比如：（这个算是内置的转换管道）

DatePipe：格式化日期值。

CurrencyPipe：把数字转换成货币字符串。

DecimalPipe：把数字转换成十进制数的字符串。

PercentPipe：把数字转换成百分比字符串。

对于使用这些管道的页面还需要特别引入一些相关包，注册“zh”，不然就会出现下面的问题：

在使用管道的界面的ts顶部，做如下设置：即可成功显示时间

import zh from '@angular/common/locales/zh';
import { registerLocaleData } from '@angular/common';
registerLocaleData(zh);

结果：

关注

专栏目录