Angular4（超过2个）的本地化设置

罗克尔是什么？

本地化是指软件内嵌的针对不同语言、国家或地区的单位、符号、日期、货币等表示规则的集合。或者简单来说，就是指定所使用的语言、国家或地区。许多软件和编程语言都会设置本地化，并根据本地化规则来进行数据表示和处理。

引用自 : 本地化（Locale）是指根据不同地区或国家的语言、文化、习俗等特点，对软件或系统进行适应和翻译的过程。

换句话说，根据不同的国家和地区，存在各种不同的书写方式，本次我们设置了这个。

罗凯尔和Pipe

在Angular的Pipe中，根据该区域设置，存在许多不同的处理结果。

日期管道

如果不进行本地化设置，以下代码执行后，DatePipe可能会出现不同的处理结果。

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

@Component({
  selector: 'app-root',
  template: `<p class="today">
本日は、{{today | date}} だ
</p>
`,
  styles: [`
.today{background-color:yellow}
`]
})
export class AppComponent {
  today = Date.now();
}

在Angular应用程序中设置区域设置。

使用LOCALE_ID来设置应用程序的区域设置。
在提供LOCALE_ID时，使用useValue参数来指定LocaleId，这样应用程序的区域设置将被设为传递的LocaleId。

我亲自尝试过

这次，我们将地区设置为日本。
在app.module.ts的provider中，使用useValue来提供LOCALE_ID，并将LocaleId设为ja-JP（日本）。
实际的代码如下。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule, LOCALE_ID} from '@angular/core';
import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule],
  providers: [{provide: LOCALE_ID, useValue: 'ja-JP'}],
  bootstrap: [AppComponent]
})
export class AppModule {
}

组件仍然如下所示，与之前一样。

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

@Component({
  selector: 'app-root',
  template: `<p class="today">
本日は、{{today | date}} だ
</p>
`,
  styles: [`
.today{background-color:yellow}
`]
})
export class AppComponent {
  today = Date.now();
}

执行结果

执行后变为以下内容，由于地域设置为日本，可以发现即使是相同的代码，经过DataPipe转换后的值已发生变化。

文献引用

山田祥寛在2017年8月4日出版了《Angular应用程序编程》这本书，由技术评论社出版。

我参考了这个网站。

区域设置（本土）是指IT术语词典中的一个概念。
Angular – 管道
DatePipe
区域设置标识

在博客中也进行了相同的发布
有关Angular4(超过2～)的区域设置和Pipe功能。