Autor:

Erstellung:2026-06-12Letzte Aktualisierung:2026-06-12

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-Assistenten

Google AI mode Gemini

Perplexity Mistral

Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren

Versionshistorie

"Veröffentlichung der dynamischen Inhaltsfunktion"
v9.0.012.6.2026

Der Inhalt dieser Seite wurde mit einer KI übersetzt.

Den englischen Originaltext ansehen

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Dynamische Einträge

Ein dynamischer Eintrag (dynamic record) ist eine Inhaltsdatei, deren Identität kein sequenzieller Index oder eine benannte Variante ist, sondern ein beliebiges Satz von Schlüssel-Wert-Paaren, die in einem meta-Feld deklariert sind. Intlayer verwendet diese Felder zur Laufzeit als Selektor. Dadurch ist es möglich, CMS-Einträge, benutzerspezifische Texte oder beliebige Inhalte zu adressieren, deren Schlüssel zur Build-Zeit noch nicht bekannt sind.

Deklarieren von dynamischen Einträgen

product-copy.abc.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abc",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
  },
} satisfies Dictionary;

export default dictionary;

product-copy.abcd.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abcd",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
  },
} satisfies Dictionary;

export default dictionary;

Nutzen von dynamischen Einträgen

Alle meta-Felder sind im Selektor erforderlich. Das Weglassen eines Feldes gibt null zurück und führt zu einem TypeScript-Fehler.

ProductCopy.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript erzwingt, dass sowohl `id` als auch `userId` angegeben werden.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript erzwingt, dass sowohl `id` als auch `userId` angegeben werden.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.vue

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

ProductCopy.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

export let productId: string;
export let userId: string;

const content = useIntlayer("product-copy", { id: productId, userId });
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

ProductCopy.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript erzwingt, dass sowohl `id` als auch `userId` angegeben werden.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "solid-intlayer";

export const ProductCopy = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
  // TypeScript erzwingt, dass sowohl `id` als auch `userId` angegeben werden.

  return (
    <>
      {content() && <p>{content().description}</p>}
    </>
  );
};

product-copy.component.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

@Component({
  selector: "app-product-copy",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductCopyComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product-copy", { id: this.productId, userId: this.userId });
  }
}

product-copy.js

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

Mit explizitem Locale

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const content = useIntlayer("product-copy", {  id: "prod_abc",  userId: "user_123",  locale: "de",});

Fehlendes Meta-Feld — Fehler zur Compile-Zeit

ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

// Typfehler: `userId` fehltconst content = useIntlayer("product-copy", { id: "prod_abc" });

Lademodus (loading mode)

Dynamische Einträge werden normalerweise verzögert (lazy) geladen. Legen Sie importMode für das Wörterbuch fest, um dies zu steuern:

ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const dictionary = {
  key: "product-copy",
  importMode: "fetch", // oder "dynamic"
  meta: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

Weitere Details zu den Modi static, dynamic und fetch finden Sie unter Bundle-Optimierung.

Typische Anwendungsfälle

Produktbezogene Marketingtexte, die in einem CMS verwaltet werden
Benutzerspezifische oder kontospezifische Inhalte
Beliebige Inhalte, die durch eine opake Runtime-ID gekennzeichnet sind

Datei pro Locale

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}