Appearance
Comment utiliser le pipe i18nPlural ? ​
Pensez à importer CommonModule ​
Vous devez importer le module CommonModule
dans votre module principal en ajoutant l'instruction suivante Ă la liste des imports
de votre module :
ts
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
// ...
})
export class MyModule { }
Ensuite, vous pouvez utiliser le pipe "i18nPlural" dans votre vue (template) en l'appliquant à une valeur numérique en utilisant la syntaxe suivante :
html
{{ myNumber | i18nPlural:myOtherPipe:myValues }}
Le pipe "i18nPlural" prend trois arguments :
- La valeur numérique sur laquelle le pipe "i18nPlural" sera appliqué (ici,
myNumber
). - Un autre pipe (ici,
myOtherPipe
) qui sera utilisé pour formater la valeur avant qu'elle ne soit utilisée par "i18nPlural". - Un objet contenant les différentes valeurs à utiliser en fonction du nombre (ici,
myValues
). Voici un exemple concret de comment cela pourrait ĂŞtre mis en Ĺ“uvre :
Voici un exemple concret de comment cela pourrait ĂŞtre mis en Ĺ“uvre :
ts
import { Component } from '@angular/core';
import { I18nPluralPipe, DecimalPipe } from '@angular/common';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
providers: [I18nPluralPipe, DecimalPipe]
})
export class MyComponent {
myNumber = 12345.678;
myOtherPipe = new DecimalPipe('en-US');
myValues = {
0: 'no items',
one: '1 item',
other: '# items'
};
}
Dans cet exemple, le pipe "i18nPlural" est utilisé avec le pipe "decimal" pour formater la valeur numérique en utilisant les conventions de formatage des nombres en anglais (États-Unis). Le pipe "i18nPlural" est ensuite utilisé avec un objet contenant les différentes valeurs à utiliser en fonction du nombre.
Le résultat final affichera "no items" si la valeur est égale à 0, "1 item" si la valeur est égale à 1, et "# items" pour les autres valeurs, où "#" sera remplacé par la valeur formatée en utilisant le pipe "