Angular 18 中对 typescript 的多种支持

Question

目前，我正在将我的应用程序升级到 Angular 18，并将 i18n 从 ngx-translate 迁移到 Angular/localize。不幸的是，我无法在 typescript 中实现复数，我可以在 html 中实现同样的功能。以下是我的翻译文本，有人可以建议是否支持吗？如果是的话请指导我如何正确地做到这一点，

const i18NValue = $localize:@@MessageID:Found {count, plural, =1 {item} other {items}};

预期文本：找到的项目或找到的项目。

提取后当我检查trans-unit时

Found {count, plural, =1 {item} other {items}}

这不能识别为 ICU。

尝试更改本地化表达，例如：

$localize:@@MessageID:Found ${count}:{count, plural, =1 {item} other {items}};

$localize:@@MessageID:Found {${count}, plural, =1 {item} other {items}};

$localize:@@MessageID:Found ${count, plural, =1 {item} other {items}};

但没有任何效果。

Answer 1

首先通过执行

ng add

:

安装本地化包

ng add @angular/localize

---

我在安装 localize 管道时遇到了麻烦，所以我进行了手动安装。

首先将

@angular/localize

添加到 package.json 中。

 npm i @angular/localize

添加包后，打开

tsconfig.app.json

并添加类型。

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["@angular/localize"]
  },
  "files": ["src/main.ts"],
  "include": ["src/**/*.d.ts"]
}

输入“added”后，打开

main.ts

并添加以下导入。

import '@angular/localize/init';

您还应该将

CommonModule

添加到导入中，以便可以访问

ngPlural

指令。

还要确保您已将

I18nPluralPipe

添加到应用程序的提供者数组中。

bootstrapApplication(App, {
  providers: [I18nPluralPipe],
});

添加这些后，您应该能够访问

$localize

，并且您可以使用以下代码片段在 TS 中执行复数翻译。

ngOnInit() {
  const numericVariable = 1;
  const plural = this.i18nPluralPipe.transform(
    numericVariable,
    {
      '=0': $localize`No results found.`,
      '=1': $localize`One result found.`,
      other: $localize`${numericVariable} results found.`,
    },
    this.locale
  );

  // do what you want with this pluralized variable
  console.log(plural);
}

完整代码：

import {
  Component,
  Inject,
  LOCALE_ID,
  importProvidersFrom,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { I18nPluralPipe, CommonModule } from '@angular/common';

import '@angular/localize/init';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h1>Pluralization</h1>
<p>{{ locale }}</p>

<h2>English</h2>
<h3>Example-1</h3>
<div [ngPlural]="itemNum">
  <ng-template ngPluralCase="0">There is nothing</ng-template>
  <ng-template ngPluralCase="1">There is one item</ng-template>
  <ng-template ngPluralCase="other">There are {{ itemNum }} items</ng-template>
</div>
<h3>Example-2</h3>
<div [ngPlural]="days">
  <ng-template ngPluralCase="=0">No days</ng-template>
  <ng-template ngPluralCase="one">1 day</ng-template>
  <ng-template ngPluralCase="=2">Two days</ng-template>
  <ng-template ngPluralCase="other">{{ days }} days</ng-template>
</div>
<h3>Example-3</h3>
<div [ngPlural]="minutes">
  <ng-template ngPluralCase="=0">just now</ng-template>
  <ng-template ngPluralCase="=1">after one minute</ng-template>
  <ng-template ngPluralCase="other">after {{ minutes }} minutes</ng-template>
</div>

<!-- Set LOCALE_ID to de_DE in app.module.ts to see this correctly -->
<h2>German</h2>
<h3>Example-4</h3>
<div [ngPlural]="days">
  <ng-template ngPluralCase="one">{{ days }} Tag</ng-template>
  <ng-template ngPluralCase="other">{{ days }} Tage</ng-template>
</div>

<!-- Set LOCALE_ID to hr_HR in app.module.ts to see this correctly-->
<h2>Croatian</h2>
<h3>Example-5</h3>
<div [ngPlural]="hours">
  <ng-template ngPluralCase="one">{{ hours }} sat</ng-template>
  <ng-template ngPluralCase="few">{{ hours }} sata</ng-template>
  <ng-template ngPluralCase="other">{{ hours }} sati</ng-template>
</div>

  `,
})
export class App {
  // For testing change value to 0,4,5, 5.2
  itemNum = 0;
  days = 5;
  minutes = 20;
  hours = 10;
  messageCount = 9;
  name = 'Arman';
  welcome!: string;

  constructor(
    private i18nPluralPipe: I18nPluralPipe,
    @Inject(LOCALE_ID) public locale: string
  ) {}

    ngOnInit() {
      const numericVariable = 1;
      const plural = this.i18nPluralPipe.transform(
        numericVariable,
        {
          '=0': $localize`No results found.`,
          '=1': $localize`One result found.`,
          other: $localize`${numericVariable} results found.`,
        },
        this.locale
      );

      // do what you want with this pluralized variable
      console.log(plural);
    }
}

bootstrapApplication(App, {
  providers: [I18nPluralPipe],
});

Stackblitz 演示