Pluralinhalt / Plural in Intlayer

Wie Plural funktioniert

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

Wann man plural vs enu verwendet

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

Pluralinhalt einrichten

Um Pluralinhalt in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inhaltsmodul, das den plural-Helfer verwendet. Die Kategorie other ist erforderlich und wird als Fallback verwendet, wenn ein Gebietsschema keine spezifischere Kategorie definiert.

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      de: plural({
        one: "{{count}} Stelle",
        other: "{{count}} Stellen",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Die unterstützten Kategorien sind zero, one, two, few, many, other. Sie müssen nur die Kategorien deklarieren, die Ihre Zielsprache verwendet – Intlayer fällt auf other zurück, wenn keine spezifische Kategorie passt.

Der Platzhalter {{count}} wird automatisch durch die Anzahl ersetzt, die Sie zur Laufzeit übergeben. Sie können auch andere Platzhalter einschließen (siehe Benutzerdefinierte Platzhalter unten).

Pluralinhalt mit React Intlayer verwenden

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

defineProps<{ count: number }>();

const { totalOpenings } = useIntlayer("total_openings");
</script>

<template>
  <div>
    <p>{{ totalOpenings(count) }}</p>
  </div>
</template>

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

export let count: number;

const content = useIntlayer("total_openings");
</script>

<div>
  <p>{$content.totalOpenings(count)}</p>
</div>

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* Auf Englisch:                                  */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      <p>{totalOpenings(props.count)}</p>
    </div>
  );
};

export default OpeningsComponent;

import { Component, Input } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-openings",
  template: `
    <div>
      <p>{{ content().totalOpenings(count) }}</p>
    </div>
  `,
})
export class OpeningsComponent {
  @Input() count!: number;

  content = useIntlayer("total_openings");
}

totalOpenings(21); // Kurzform: nur Anzahl
totalOpenings({ count: 21 }); // explizite Form

Benutzerdefinierte Platzhalter

Plural-Zeichenfolgen können andere Platzhalter als {{count}} enthalten. Übergeben Sie diese in der Objektform zusammen mit count:

import { plural, type Dictionary } from "intlayer";

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, du hast {{count}} neue Nachricht",
      other: "{{name}}, du hast {{count}} neue Nachrichten",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice, du hast 1 neue Nachricht"

summary({ count: 7, name: "Alice" });
// → "Alice, du hast 7 neue Nachrichten"

CLDR-Kategorien auf einen Blick

Verschiedene Sprachen verwenden unterschiedliche Teilmengen der CLDR-Kategorien. Einige häufige Fälle:

Sie müssen sich das nicht merken – deklarieren Sie die Kategorien, für die Sie Übersetzungen haben, und Intlayer wird bei Bedarf auf other zurückgreifen.

Einschränkung

Im Gegensatz zu anderen Knoten kann der plural-Knoten noch nicht mit untergeordneten Knoten verschachtelt werden.

Beispiel:

Gültig:

    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      fr: plural({
        one: "{{count}} offre",
        other: "{{count}} offres",
      }),
    }),

Ungültig:

totalOpenings: plural({
  one: t({
    en: "{{count}} opening",
    fr: "{{count}} offre",
  }),
  other: t({
    en: "{{count}} openings",
    fr: "{{count}} offres",
  }),
}),

Zusätzliche Ressourcen

Weitere detaillierte Informationen zur Konfiguration und Verwendung finden Sie in den folgenden Ressourcen:

• Dokumentation zur Aufzählung (Enumeration)
• Dokumentation zur Einfügung (Insertion)
• Intlayer CLI Dokumentation
• React Intlayer Dokumentation
• Next Intlayer Dokumentation

Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Verwendung von Intlayer in verschiedenen Umgebungen und Frameworks.