网站首页 » 前端开发 » Angular 2 » Angular 4.x NgPlural 指令用法
上一篇:
下一篇:

Angular 4.x NgPlural 指令用法

基本用法

下面是官方给出的用法样例:

官方套路
<some-element [ngPlural]="value">
  <ng-template ngPluralCase="=0">there is nothing</ng-template>
  <ng-template ngPluralCase="=1">there is one</ng-template>
  <ng-template ngPluralCase="few">there are a few</ng-template>
</some-element>

示例

其实 NgPlural 的用法跟 NgSwitch 的用法很相似,它们之间的区别在于书写方式及对逻辑的处理有一点点不同。不过从整体来看他们还算是一对孪生兄弟。下面我们来看一个例子。

app.component.html
<div [ngPlural]="value">
  <ng-template ngPluralCase="=0">there is nothing</ng-template>
  <ng-template ngPluralCase="=1">there is one</ng-template>
  <ng-template ngPluralCase="other">there are a other</ng-template>
</div>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  title = 'Angular 4.x NgPlural';
  value = 25;
}

在上面的示例中有几个地方需要注意一下:

授课时间

some-element 表示我们平时用到的 HTML 元素(比如:div、p)。

ng-template 是Angular 内置支持的标签元素。

“=0” 表示精确值匹配,跟 NgSwitch 中的一样。

如果单纯看上面的示例估计你会觉得这不就是  NgSwitch 的写法吗?我们先来看看Angular 官网对这个指令的用法介绍:

显示匹配表达式值或者分类条件的 DOM 子树。

要想使用这个指令,你必需要有一个带有 [ngPlural] 属性的元素,并且这个元素里面的子元素必需可以通过 [ngPluralCase] 配合表达式值来控制显示与否。下面就是 ngPlural 与 ngSwitch 之间的区别:

如果 [ngPluralCase] 的值以 = 开头,那么就是精确匹配。比如上面的 0 和 1 。

当精确匹配没匹配成功时,就会进行分类匹配。类别有:one、two、few、many、other。要想知道这些分类的定义可以阅读如下两个链接:

http://cldr.unicode.org/index/cldr-spec/plural-rules

http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html

迷惑不解

不过,感觉Angular 里的源码的处理逻辑跟上面第二个链接中的分类定义有很大的出入。是我理解错了吗???

我们不妨以 en-US 为例子:

Angular 源码中对于 en-US (代码中的 case ‘en’ )语言的处理只有两种:是 1 和 不是 1,也就是在英文状态下,[ngPluralCase] 的取值可以分为两类(精确值 | 其它),也就是上面的示例,我个人觉得在某种情况下 ngPlural 的用法与ngSwitch 是一样的,请看代码截取:

common.es5.js
switch (lang) {
  ......
  ......
  ......

  case 'ast':
  case 'ca':
  case 'de':
  case 'en':
  case 'et':
  case 'fi':
  case 'fy':
  case 'gl':
  case 'it':
  case 'nl':
  case 'sv':
  case 'sw':
  case 'ur':
  case 'yi':
    if (i === 1 && v === 0)
      return Plural.One;
    return Plural.Other;
  case 'be':

  ......
  ......
  ......

  default:
    return Plural.Other;
}

在不同语言中 one、two、few、many、other 的数值范围可能会不一样,所以才有这个超长的 switch 语句。

看完这个源码后我反而更加困惑了:ngPlural 的意义何在?在不同的语言里赋予 one、two、few、many、other 关键词的不同含义,是更人性化了还是给开发者多添加了一份负担?

你怎么看,欢迎留言交流,来头脑风暴这个 ngPlural 指令的意义到底何在。相信你的见解会扩大我的视野!

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-api-ngplural/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END