Как задать локаль в ангуляре?

В Angular есть несколько способов задать локаль для вашего приложения. Локаль определяет настройки для форматирования дат, времени, чисел и других локализованных данных.

Первый способ - это задать локаль в файле app.module.ts, который является главным модулем вашего приложения. В этом файле можно импортировать нужные локализации из библиотеки @angular/common, используя функцию registerLocaleData. Например, если вы хотите использовать локаль английского языка, вы можете добавить следующий код:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
import localeEn from '@angular/common/locales/en';

registerLocaleData(localeEn);

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

В приведенном примере мы импортируем английскую локаль из @angular/common/locales/en и регистрируем ее с помощью registerLocaleData. Затем мы устанавливаем значение en для LOCALE_ID в качестве провайдера, чтобы весь код в приложении использовал эту локаль.

Второй способ - это использовать сервис LOCALE_ID и внедрить его в нужные компоненты или сервисы для получения текущей локали. Например, вы можете сделать следующее:

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

@Component({
  selector: 'app-root',
  template: `
    <p>Current locale: {{ currentLocale }}</p>
  `
})
export class AppComponent {
  constructor(@Inject(LOCALE_ID) private localeId: string) { }

  get currentLocale(): string {
    return this.localeId;
  }
}

В этом примере мы внедряем сервис LOCALE_ID в компонент AppComponent и используем его значение для отображения текущей локали в шаблоне.

Третий способ - это использовать маршрутизацию для изменения локали в зависимости от URL-адреса или других параметров. Например, вы можете создать маршрут с параметром lang, который будет указывать на нужную локаль. Затем вы можете использовать этот параметр для задания локали в соответствующий компонент или сервис. Например:

const routes: Routes = [
  { path: '', redirectTo: '/en', pathMatch: 'full' },
  { path: ':lang', component: HomeComponent },
  // другие маршруты
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В приведенном примере мы создаем маршрут с параметром lang, который указывает на текущую локаль. Затем мы можем использовать этот параметр в компоненте HomeComponent для задания локали.