\n\n \n ```\n\n \n \n ```svelte fileName=\"ProductCopy.svelte\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n \n\n {#if $content}\n

{$content.description}

\n {/if}\n ```\n\n \n \n ```tsx fileName=\"ProductCopy.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"preact-intlayer\";\n\n export const ProductCopy = ({\n productId,\n userId,\n }: {\n productId: string;\n userId: string;\n }) => {\n const content = useIntlayer(\"product-copy\", { id: productId, userId });\n // TypeScript erzwingt, dass sowohl `id` als auch `userId` angegeben werden.\n\n if (!content) return null;\n\n return

{content.description}

;\n };\n ```\n\n \n \n ```tsx fileName=\"ProductCopy.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"solid-intlayer\";\n\n export const ProductCopy = (props: {\n productId: string;\n userId: string;\n }) => {\n const content = useIntlayer(\"product-copy\", { id: props.productId, userId: props.userId });\n // TypeScript erzwingt, dass sowohl `id` als auch `userId` angegeben werden.\n\n return (\n <>\n {content() &&

{content().description}

}\n \n );\n };\n ```\n\n \n \n ```typescript fileName=\"product-copy.component.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { Component, Input, OnInit } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-product-copy\",\n template: `\n @if (content()) {\n

{{ content().description }}

\n }\n `,\n })\n export class ProductCopyComponent implements OnInit {\n @Input() productId!: string;\n @Input() userId!: string;\n\n content: any;\n\n ngOnInit() {\n this.content = useIntlayer(\"product-copy\", { id: this.productId, userId: this.userId });\n }\n }\n ```\n\n \n \n ```javascript fileName=\"product-copy.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const content = useIntlayer(\"product-copy\", {\n id: \"prod_abcd\",\n userId: \"user_123\"\n });\n\n if (content) {\n document.body.innerHTML = `

${content.description}

`;\n }\n ```\n\n \n\n\n### Mit explizitem Locale\n\n```tsx\nconst content = useIntlayer(\"product-copy\", {\n id: \"prod_abc\",\n userId: \"user_123\",\n locale: \"de\",\n});\n```\n\n### Fehlendes Meta-Feld — Fehler zur Compile-Zeit\n\n```ts\n// Typfehler: `userId` fehlt\nconst content = useIntlayer(\"product-copy\", { id: \"prod_abc\" });\n```\n\n## Lademodus (loading mode)\n\nDynamische Einträge werden normalerweise verzögert (lazy) geladen. Legen Sie `importMode` für das Wörterbuch fest, um dies zu steuern:\n\n```ts contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nconst dictionary = {\n key: \"product-copy\",\n importMode: \"fetch\", // oder \"dynamic\"\n meta: { id: \"prod_abc\", userId: \"user_123\" },\n content: { … },\n} satisfies Dictionary;\n\nexport default dictionary;\n```\n\nWeitere Details zu den Modi `static`, `dynamic` und `fetch` finden Sie unter [Bundle-Optimierung](/de/doc/concept/bundle-optimization).\n\n## Typische Anwendungsfälle\n\n- Produktbezogene Marketingtexte, die in einem CMS verwaltet werden\n- Benutzerspezifische oder kontospezifische Inhalte\n- Beliebige Inhalte, die durch eine opake Runtime-ID gekennzeichnet sind\n","description":"Verwenden Sie das Meta-Feld in Inhaltsdateien von Intlayer, um vom CMS verwaltete Einträge zu deklarieren, die zur Laufzeit über eine opake ID abgerufen werden. Dies ermöglicht streng typisierte dynamische Inhalte ohne Enumeration zur Build-Zeit.","url":"https://intlayer.org/de/doc/concept/dynamic-records","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Dynamische Einträge, Dynamischer Inhalt, CMS, Laufzeitinhalte, Intlayer, Internationalisierung","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Entwickler, Inhaltsmanager"}}

Autor:

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

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-AssistentenChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

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

Diese Dokumentation bearbeiten

Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.

GitHub-Link zur Dokumentation

Kopieren

Markdown des Dokuments in die Zwischenablage kopieren

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

Varianten Datei pro Locale