Como usar angular 9 $ localizar com plurais?

9

Desde Angular 9, podemos usar

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

Para i18n no código datilografado. Isso ainda tem algumas limitações, pois o ng xi18ncomando não detecta as strings, mas se esses textos forem adicionados manualmente ao arquivo de tradução, ele funcionará.

A $localizefunção está muito bem documentada no JSDoc na fonte , no entanto, não explica como trabalhar com plurais. O que quero dizer é algo assim (pseudo-código):

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

Isso é possível com $localize? Se sim: como? Se não: como o Angular compila essas expressões do HTML para o TypeScript?

ianque
fonte
isso ajuda você <span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>? Isso está nos documentos. Bem parecido com o que você quer
Dave Pastor
@ DavePastor: Sim, eu tentei isso. Eu mudei isso na questão agora. No entanto, é pseudo-código, apenas para ilustrar o que quero alcançar.
yankee
@ DavePastor: (sobre o segundo comentário): Não, isso não ajuda. Isso é HTML, não TypeScript.
yankee
Ok, então você quer lidar com isso no lado do TS. Entendi.
Dave Pastor

Respostas:

2

Por enquanto, não é possível usar UTIs $localize, como discutido nesta edição do github . Desde os últimos comentários, parece que a equipe angular está considerando isso se permanecer leve.

Enquanto isso, a solução sugerida é criar seu próprio método auxiliar que retorne a tradução correta com base no parâmetro count.

    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;
    } 
David
fonte