Angular 10 I18nSelectPipe API

在本文中，我们将了解 Angular 10 中的I18nSelectPipe是什么以及如何使用它。

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

句法：

{{ value | i18nSelect : map}}

NgModule：I18nSelectPipe使用的模块是：

• 通用模块

方法：

• 创建要使用的 Angular 应用程序。
• 无需任何导入即可使用 I18nSelectPipe。
• 在 app.component.ts 中定义接受 I18nSelectPipe 值的变量。
• 在 app.component.html 中使用上面的语法和 '|'用于制作 I18nSelectPipe 元素的符号。
• 使用 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 {
    // Age Variable
    age : string = 'twenty';
  
    // Map from which I18nSelectPipe takes the value
    votin : any =
    {'twenty': 'Can Vote', 'seventeen':'Cannot Vote'};}

app.component.html

The User {{age | i18nSelect: votin}} 

输出：

示例 2：

app.component.ts

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

app.component.html

The User {{age | i18nSelect: votin}} 

输出：

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