Angular 10 I18nPluralPipe API

在这篇文章中，我们将看到什么是Angular 10中的I18nPluralPipe以及如何使用它。I18nPluralPipe是一个地图，它接收一个字符串值，根据给定的规则进行复数化。

语法:

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

NgModule: I18nPluralPipe使用的模块是。

• CommonModule

步骤:

• 创建一个要用的angular应用程序。
• 对于I18nPluralPipe的使用，不需要任何导入。
• 在app.component.ts中定义需要I18nPluralPipe值的变量。
• 在app.component.html中使用上述带有’|’符号的语法来制作I18nPluralPipe元素。
• 使用ng serve为angular应用程序提供服务，以查看输出。

输入值:

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

参数:

• pluralMap：它需要一个对象值。
• locale：它需要一个字符串值。

示例 1:

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'
        };
}

<!-- In Below Code I18nPluralPipe is used -->
<div>there are: {{ colors.length | i18nPlural: gfg }}</div>

输出:

示例 2:

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'
        };
}

<!-- In Below Code I18nPluralPipe is used -->
<div>there are: {{ language.length | i18nPlural: gfg }}</div>

输出: