Angular 10 I18nSelectPipe API

在这篇文章中，我们将看到Angular 10中的I18nSelectPipe是什么以及如何使用它。

I18nSelectPipe是一个选择器，用于显示与当前值匹配的字符串。

语法:

{{ value | i18nSelect : map}}

NgModule: I18nSelectPipe使用的模块是。

• CommonModule

步骤:

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

输入值:

• value：它需要一个字符串值。

参数:

• map：它接受一个对象值，表示不同值应显示的文本。

示例 1:

import { Component, OnInit } 
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // Age Variable
    age : string = 'twenty';
  
    // Map from which I18nSelectPipe takes the value
    votin : any =
    {'twenty': 'Can Vote', 'seventeen':'Cannot Vote'};}

<!-- In Below Code I18nSelectPipe is used -->
<div>The User <b>{{age | i18nSelect: votin}}</b> </div>

输出:

示例 2:

import { Component, OnInit }
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // Age Variable
    age : string = 'seventeen';
  
    // Map from which I18nSelectPipe takes the value
    votin : any = 
    {'twenty': 'Can Vote', 'seventeen':'Cannot Vote'};}

<!-- In Below Code I18nSelectPipe is used -->
<div>The User <b>{{age | i18nSelect: votin}}</b> </div>

输出: