Angular 10 I18nPluralPipe API

在本文中，我们将了解 Angular 10 中的I18nPluralPipe是什么以及如何使用它。 I18nPluralPipe 是一个映射，它采用根据给定规则复数的字符串值。

句法：

{{ value |  i18nPlural : map [ : rule]}}

NgModule：I18nPluralPipe使用的模块是：

• 通用模块

方法：

• 创建一个要使用的 Angular 应用程序。
• 无需任何导入即可使用 I18nPluralPipe。
• 在 app.component.ts 中定义接受 I18nPluralPipe 值的变量。
• 在 app.component.html 中使用上面的语法和 '|'用于制作 I18nPluralPipe 元素的符号。
• 使用 ng serve 为 Angular 应用程序提供服务以查看输出。

输入值：

• value：它需要一个数字值。

参数：

• 复数地图：它需要一个 对象值。
• 语言环境：它需要一个字符串值。

示例 1：

app.component.ts

import { Component, OnInit } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
  
    // Color array
    colors: any[] = ['red','green','blue'];
  
    // Map from which I18nPluralPipe takes the value
    gfg:
        {[k: string]: string} = {
            '=0': 'No color', 
            '=1': 'one color',  
            'other': '# colors'
        };
}

app.component.html

there are: {{ colors.length | i18nPlural: gfg }}

输出：

示例 2：

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
  
    // Language array
    language: any[] = [];
  
    // Map from which I18nPluralPipe
    // takes the value
    gfg:
        {[k: string]: string} = {
            '=0': 'zero languages', 
            '=1': 'one language',
            'other': '# languages'
        };
}

app.component.html

there are: {{ language.length | i18nPlural: gfg }}

输出：

参考： https://angular.io/api/common/I18nPluralPipe