Angular 5 Breaking change - 手动导入区域设置

Question

更改日志说：

  

默认情况下，Angular现在只包含该语言的区域设置数据   en-US，如果你将LOCALE_ID的值设置为另一个语言环境，你会   必须导入此语言的新语言环境数据，因为我们不使用   intl API了。

但我找不到任何参考“导入”的含义，怎么做以及我得到

  

xxx.html：30错误错误：缺少区域设置数据   locale“de-CH”

我使用以下命令配置语言环境：

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

和

  providers: [
    { provide: LOCALE_ID, useValue: 'de-CH' }
  ],

Answer 1

这在当前版本中很难找到:(。这是我发现的：

不同的区域设置位于包@angular/common/locales/中。在你的情况下，这是：

import localeDECH from '@angular/common/locales/de-CH';

现在您需要在项目中注册此区域设置定义。有一个名为registerLocaleData的函数位于：@angular/common。

因此，app.module.ts中的代码应如下所示：

import {LOCALE_ID} from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDECH from '@angular/common/locales/de-CH';

registerLocaleData(localeDECH);

@NgModule({
...
providers: [
   { provide: LOCALE_ID, useValue: 'de-ch' },
]
...
})
....

Answer 2

有关

{ provide: LOCALE_ID, useValue: 'pt-BR' }

使用：

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

Answer 3

Angular pipes can help you with internationalization: the DatePipe, CurrencyPipe, DecimalPipe and PercentPipe use locale data to format data based on the LOCALE_ID.

默认情况下，Angular仅包含en-US的区域设置数据。如果将LOCALE_ID的值设置为其他语言环境，则必须导入该新语言环境的语言环境数据。当您使用带有ng serve和ng build的参数--locale时，CLI会为您导入语言环境数据。

如果要导入其他语言的区域设置数据，可以手动执行：

src/app/app.module.ts
content_copy
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);

@ angular / common / locales中的文件包含您需要的大部分区域设置数据，但某些高级格式设置选项可能仅在您可以从@ angular / common / locales / extra导入的额外数据集中可用。在这种情况下会出现一条错误消息通知您。

src/app/app.module.ts
content_copy
import { registerLocaleData } from '@angular/common';
import localeFrCa from '@angular/common/locales/fr-CA';
import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';

registerLocaleData(localeFrCa, localeFrCaExtra);

请参阅有关新旧区域设置的表格