How to use angular 9 $localize with plurals?

喜你入骨 提交于 2021-02-08 12:33:48

问题


Since Angular 9 we can use

$localize`Hello ${name}:name:`

For i18n in typescript code. This still has some limitations as the ng xi18n command does not detect the strings, but if these texts are added manually to the translation file it works.

The $localize function is quite well documented in the JSDoc in the source, however it does not explain how to work with plurals. What I mean is something like this (pseudo-code):

$localize`Hello {${count}, plural, =1 {reader} other {readers}}`

Is this possible with $localize? If yes: How? If no: How does Angular compile such expressions from HTML to TypeScript?


回答1:


For now, it is not possible to use ICUs with $localize, as discussed in this github issue. From the last comments, it looks like angular team is considering it if it remains lightweight.

Meanwhile, the suggested workaround is to create your own helper method that returns the correct translation based on the count parameter.

    title = $localize `Hi ${this.name}! You have ${
        plural(this.users.length. {
          0: $localize `no users`,
          1: $localize `one user`,
          other: $localize`${this.users.length} users`,
    }.`

    function plural(value, options) {
      // Handle 0, 1, ... cases
      const directResult = options[value];
      if (directResult !== undefined) { return directResult; }
      // handle zero, one, two, few, many
      // ...
      return options.other;
    } 



回答2:


I've just read issue https://github.com/angular/angular/issues/35912 and I think that intl-messageformat can do what you need.

See https://github.com/formatjs/formatjs/tree/master/packages/intl-messageformat.



来源:https://stackoverflow.com/questions/60597235/how-to-use-angular-9-localize-with-plurals

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!