¿Cómo usar angular 9 $ localizar con plurales?

Desde Angular 9 podemos usar

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

Para i18n en código mecanografiado. Esto todavía tiene algunas limitaciones, ya que el ng xi18ncomando no detecta las cadenas, pero si estos textos se agregan manualmente al archivo de traducción, funciona.

La $localizefunción está bastante bien documentada en el JSDoc en la fuente , sin embargo, no explica cómo trabajar con plurales. Lo que quiero decir es algo como esto (pseudocódigo):

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

¿Es esto posible con $localize? En caso afirmativo: ¿cómo? En caso negativo: ¿cómo compila Angular tales expresiones de HTML a TypeScript?

angular angular-i18n

— yanqui
fuente

te ayuda esto <span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>? Eso está en los documentos. Bastante similar a lo que quieres

— Dave Pastor

@DavePastor: Sí, lo intenté. Cambié eso en la pregunta ahora. Sin embargo, es un pseudocódigo, solo para ilustrar lo que quiero lograr.

— Yankee

@DavePastor: (con respecto al segundo comentario): No, esto no ayuda. Esto es HTML, no TypeScript.

— Yankee

Ok, entonces quieres manejar esto en el lado TS. Entendido.

— Dave Pastor

Mira este blog.ninja-squad.com/2019/12/10/angular-localize

— Dave Pastor

Respuestas:

Por ahora, no es posible usar UCI con $localize, como se discutió en este número de github . Según los últimos comentarios, parece que el equipo angular lo está considerando si sigue siendo liviano.

Mientras tanto, la solución sugerida es crear su propio método auxiliar que devuelva la traducción correcta en función del parámetro de conteo.

    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
fuente

Acabo de leer el problema https://github.com/angular/angular/issues/35912 y creo que eso intl-messageformatpuede hacer lo que necesita.

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

— kemsky
fuente