\n\n\n```\n\n \n \n\nTo use nested content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

Full Nested Content: {JSON.stringify($content.fullNestedContent)}

\n

Partial Nested Value: {$content.partialNestedContent}

\n

\n```\n\n \n \n\nTo use nested content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst NestComponent: Component = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-nest\",\n template: `\n

\n

\n Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}\n

\n

Partial Nested Value: {{ content().partialNestedContent }}

\n

\n `,\n})\nexport class NestComponent {\n content = useIntlayer(\"key_of_my_second_dictionary\");\n JSON = JSON;\n}\n```\n\n \n \n\nTo use nested content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"key_of_my_second_dictionary\").onChange(\n (newContent) => {\n document.getElementById(\"nested\")!.textContent =\n newContent.partialNestedContent;\n }\n);\n\n// Initial render\ndocument.getElementById(\"nested\")!.textContent = content.partialNestedContent;\n```\n\n \n\n\n## Verwendung der Verschachtelung mit React Intlayer\n\nUm verschachtelte Inhalte in einer React-Komponente zu verwenden, nutzen Sie den `useIntlayer`-Hook aus dem Paket `react-intlayer`. Dieser Hook ruft den richtigen Inhalt basierend auf dem angegebenen Schlüssel ab. Hier ist ein Beispiel, wie Sie ihn verwenden können:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

\n Vollständiger verschachtelter Inhalt:{\" \"}\n {JSON.stringify(fullNestedContent)}\n {/* Ausgabe: {\"content\": \"content\", \"subContent\": {\"contentNumber\": 0, \"contentString\": \"string\"}} */}\n

\n

\n Teilweise verschachtelter Wert: {partialNestedContent}\n {/* Ausgabe: 0 */}\n

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n## Zusätzliche Ressourcen\n\nFür detailliertere Informationen zur Konfiguration und Nutzung lesen Sie die folgenden Ressourcen:\n\n- [Intlayer CLI Dokumentation](/de/doc/concept/cli)\n- [React Intlayer Dokumentation](/de/doc/environment/create-react-app)\n- [Next Intlayer Dokumentation](/de/doc/environment/nextjs/15)\n\nDiese Ressourcen bieten weitere Einblicke in die Einrichtung und Nutzung von Intlayer in verschiedenen Umgebungen und mit verschiedenen Frameworks.\n","description":"Erfahren Sie, wie Sie die Inhaltsverschachtelung in Intlayer nutzen können, um Ihre mehrsprachigen Inhalte effizient wiederzuverwenden und zu strukturieren. Folgen Sie dieser Dokumentation, um die Verschachtelung nahtlos in Ihr Projekt zu integrieren.","url":"https://intlayer.org/de/doc/concept/content/nesting","datePublished":"2025-02-07","dateModified":"2025-06-29","keywords":"Nesting, Inhaltswiederverwendung, Dokumentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Entwickler, Inhaltsmanager"}}

Autor:

Erstellung:2025-02-07Letzte Aktualisierung:2025-06-29

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

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

Verschachtelung / Sub-Content-Referenzierung

Wie Verschachtelung funktioniert

In Intlayer wird die Verschachtelung durch die Funktion nest erreicht, die es Ihnen ermöglicht, Inhalte aus einem anderen Wörterbuch zu referenzieren und wiederzuverwenden. Anstatt Inhalte zu duplizieren, können Sie auf ein bestehendes Inhaltsmodul mit seinem Schlüssel verweisen.

Einrichtung der Verschachtelung

To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

**/*.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

"use client";

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

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const NestComponent: Component = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("key_of_my_second_dictionary").onChange(
(newContent) => {
  document.getElementById("nested")!.textContent =
    newContent.partialNestedContent;
}
);

// Initial render
document.getElementById("nested")!.textContent = content.partialNestedContent;

Verwendung der Verschachtelung mit React Intlayer

Um verschachtelte Inhalte in einer React-Komponente zu verwenden, nutzen Sie den useIntlayer-Hook aus dem Paket react-intlayer. Dieser Hook ruft den richtigen Inhalt basierend auf dem angegebenen Schlüssel ab. Hier ist ein Beispiel, wie Sie ihn verwenden können:

**/*.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const NestComponent: FC = () => {
  const { fullNestedContent, partialNestedContent } = useIntlayer(
    "key_of_my_second_dictionary"
  );

  return (
    <div>
      <p>
        Vollständiger verschachtelter Inhalt:{" "}
        {JSON.stringify(fullNestedContent)}
        {/* Ausgabe: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Teilweise verschachtelter Wert: {partialNestedContent}
        {/* Ausgabe: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

Zusätzliche Ressourcen

Für detailliertere Informationen zur Konfiguration und Nutzung lesen Sie die folgenden Ressourcen:

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