Creation:2026-01-20Last update:2026-03-24

Prześlij ten dokument do swojego ulubionego asystenta AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI

Historia wersji

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024.03.2026
"przeniesienie importu z {{framework}}-intlayer do {{framework}}-intlayer/html"
v8.5.024.03.2026
"Dodano HTMLRenderer / useHTMLRenderer / renderHTML"
v8.0.022.01.2026
"Dodano obsługę parsowania HTML"
v8.0.020.01.2026

Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.

Zobacz ostatnią wersję oryginalnej treści w języku angielskim

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

Zawartość HTML / HTML w Intlayer

Name: Intlayer
Author: Intlayer

Intlayer obsługuje zawartość HTML, umożliwiając osadzanie bogatej, strukturalnej treści w Twoich słownikach. Ta zawartość może być renderowana za pomocą standardowych tagów HTML lub zastępowana niestandardowymi komponentami w czasie wykonywania.

Deklarowanie treści HTML

Możesz zadeklarować treść HTML, używając funkcji html lub po prostu jako łańcuch znaków.

Użyj funkcji html, aby jawnie zadeklarować zawartość HTML. Zapewnia to poprawne odwzorowanie standardowych tagów, nawet jeśli automatyczne wykrywanie jest wyłączone.

htmlDictionary.content.ts

Kopiuj kod

Skopiuj kod do schowka

import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // można ustawić w pliku konfiguracyjnym  content: {    myHtmlContent:  html("<p>Witaj <strong>świecie</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // można ustawić w pliku konfiguracyjnym  content: {    myHtmlContent:  html("<p>Witaj <strong>świecie</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

Jeśli ciąg zawiera typowe tagi HTML (np. <p>, <div>, <strong> itd.), Intlayer automatycznie go przekształci.

htmlDictionary.content.ts

Kopiuj kod

Skopiuj kod do schowka

export default {  key: "app",  contentAutoTransformation: true, // można ustawić w pliku konfiguracyjnym  content: {    myHtmlContent:  "<p>Witaj <strong>świecie</strong></p>",  },};

export default {  key: "app",  contentAutoTransformation: true, // można ustawić w pliku konfiguracyjnym  content: {    myHtmlContent:  "<p>Witaj <strong>świecie</strong></p>",  },};

Importuj zawartość HTML z plików. Zauważ, że obecnie funkcja file() zwraca ciąg znaków, który zostanie automatycznie rozpoznany jako HTML, jeśli zawiera tagi.

htmlDictionary.content.ts

Kopiuj kod

Skopiuj kod do schowka

import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),      pl: html(file("./content.pl.html")),    }),  },};

import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),      pl: html(file("./content.pl.html")),    }),  },};

Węzeł `html()`

Funkcja html() to nowa funkcja w Intlayer v8, która pozwala na jawne definiowanie treści HTML w słownikach. Chociaż Intlayer często potrafi automatycznie wykryć treść HTML, użycie funkcji html() zapewnia kilka korzyści:

Bezpieczeństwo typów: Funkcja html() pozwala zdefiniować oczekiwane właściwości (props) dla niestandardowych komponentów, co zapewnia lepsze autouzupełnianie i sprawdzanie typów w edytorze.
Jawna deklaracja: Gwarantuje, że ciąg znaków będzie zawsze traktowany jako HTML, nawet jeśli nie zawiera standardowych tagów HTML, które wyzwoliłyby automatyczne wykrywanie.
Definiowanie niestandardowych komponentów: Możesz przekazać drugi argument do html(), aby zdefiniować niestandardowe komponenty i ich oczekiwane typy właściwości.

typescript

Kopiuj kod

Skopiuj kod do schowka

import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='Witaj'>Świecie</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='Witaj'>Świecie</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

Podczas korzystania z metody .use() na węźle HTML, dostarczone komponenty zostaną sprawdzone pod kątem definicji podanej w funkcji html() (jeśli jest dostępna).

Renderowanie HTML

Renderowaniem można zająć się automatycznie za pomocą systemu treści Intlayer lub ręcznie przy użyciu specjalistycznych narzędzi.

Automatyczne renderowanie (z użyciem `useIntlayer`)

Kiedy uzyskujesz dostęp do treści za pomocą useIntlayer, węzły HTML są już przygotowane do renderowania.

Węzły HTML można renderować bezpośrednio jako JSX. Standardowe tagi działają automatycznie.

App.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Użyj metody .use(), aby dostarczyć własne komponenty lub nadpisać tagi:

tsx

Kopiuj kod

Skopiuj kod do schowka

{myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

{myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

W Vue zawartość HTML można renderować przy użyciu wbudowanego komponentu component.

App.vue

Kopiuj kod

Skopiuj kod do schowka

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

Użyj .use() do nadpisania:

vue

Kopiuj kod

Skopiuj kod do schowka

<component :is="myHtmlContent.use({ h1: 'h2' })" />

<component :is="myHtmlContent.use({ h1: 'h2' })" />

Svelte renderuje węzły HTML jako ciągi znaków. Użyj {@html}, aby je wyrenderować.

svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

Preact obsługuje węzły HTML bezpośrednio w JSX.

App.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Solid obsługuje węzły HTML bezpośrednio w JSX.

App.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Angular wykorzystuje dyrektywę [innerHTML] do renderowania zawartości HTML.

app.component.ts

Kopiuj kod

Skopiuj kod do schowka

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

Użyj metody .use(), aby dostarczyć własne komponenty lub nadpisać tagi:

typescript

Kopiuj kod

Skopiuj kod do schowka

content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})

content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})

Konfiguracja globalna z `HTMLProvider`

Możesz skonfigurować renderowanie HTML globalnie dla całej aplikacji. To idealne rozwiązanie do zdefiniowania niestandardowych komponentów, które powinny być dostępne we wszystkich treściach HTML.

AppProvider.tsx

Kopiuj kod

Skopiuj kod do schowka

import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

Możesz również użyć własnego silnika renderującego HTML:

AppProvider.tsx

Kopiuj kod

Skopiuj kod do schowka

import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);

import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);

Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.

main.ts

Kopiuj kod

Skopiuj kod do schowka

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");

Możesz również użyć własnego silnika renderującego HTML:

main.ts

Kopiuj kod

Skopiuj kod do schowka

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");

Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.

App.svelte

Kopiuj kod

Skopiuj kod do schowka

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

Możesz również użyć własnego silnika renderującego HTML:

App.svelte

Kopiuj kod

Skopiuj kod do schowka

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html"; </script> <HTMLProvider   renderHTML={async (html) => {     const { renderHTML } = await import('svelte-intlayer/html');     return renderHTML(html);   }} >   <slot /> </HTMLProvider>

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html"; </script> <HTMLProvider   renderHTML={async (html) => {     const { renderHTML } = await import('svelte-intlayer/html');     return renderHTML(html);   }} >   <slot /> </HTMLProvider>

> Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.

AppProvider.tsx

Kopiuj kod

Skopiuj kod do schowka

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> );

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> );

Możesz również użyć własnego silnika renderującego HTML:

AppProvider.tsx

Kopiuj kod

Skopiuj kod do schowka

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('preact-intlayer/html');       return renderHTML(html);     }}   >     {children}   </HTMLProvider> );

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('preact-intlayer/html');       return renderHTML(html);     }}   >     {children}   </HTMLProvider> );

> Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.

AppProvider.tsx

Kopiuj kod

Skopiuj kod do schowka

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> );

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> );

Możesz również użyć własnego silnika renderującego HTML:

AppProvider.tsx

Kopiuj kod

Skopiuj kod do schowka

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('solid-intlayer/html');       return renderHTML(html);     }}   >     {props.children}   </HTMLProvider> );

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('solid-intlayer/html');       return renderHTML(html);     }}   >     {props.children}   </HTMLProvider> );

> Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.

app.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

Możesz również użyć własnego silnika renderującego HTML:

app.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderMarkdown: async (html) => {        const { renderMarkdown } = await import('angular-intlayer/html');        return renderMarkdown(html);      },    }),  ],};

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderMarkdown: async (html) => {        const { renderMarkdown } = await import('angular-intlayer/html');        return renderMarkdown(html);      },    }),  ],};

Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.

Ręczne renderowanie i zaawansowane narzędzia

Jeśli musisz renderować surowe łańcuchy HTML lub potrzebujesz większej kontroli nad mapowaniem komponentów, użyj poniższych narzędzi.

Komponent `<HTMLRenderer />`

Renderuj łańcuch HTML przy użyciu określonych komponentów.

tsx

Kopiuj kod

Skopiuj kod do schowka

import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

Hook `useHTMLRenderer()`

Uzyskaj wstępnie skonfigurowaną funkcję renderującą.

tsx

Kopiuj kod

Skopiuj kod do schowka

import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Witaj <strong>świecie</strong></p>");

import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Witaj <strong>świecie</strong></p>");

Narzędzie `renderHTML()`

Samodzielne narzędzie do renderowania poza komponentami.

tsx

Kopiuj kod

Skopiuj kod do schowka

import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

#### Komponent

<HTMLRenderer />

vue

Kopiuj kod

Skopiuj kod do schowka

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

Komponent `<HTMLRenderer />`

svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />

<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />

Hook `useHTMLRenderer()`

svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}

<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}

Narzędzie `renderHTML()`

svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

#### Komponent

<HTMLRenderer />

tsx

Kopiuj kod

Skopiuj kod do schowka

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

#### Hook

useHTMLRenderer()

tsx

Kopiuj kod

Skopiuj kod do schowka

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

#### Narzędzie

renderHTML()

tsx

Kopiuj kod

Skopiuj kod do schowka

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

#### Komponent

<HTMLRenderer />

tsx

Kopiuj kod

Skopiuj kod do schowka

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

#### Hook

useHTMLRenderer()

tsx

Kopiuj kod

Skopiuj kod do schowka

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

#### Narzędzie

renderHTML()

tsx

Kopiuj kod

Skopiuj kod do schowka

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

Usługa `IntlayerHTMLService`

Renderuje ciąg HTML przy użyciu usługi.

typescript

Kopiuj kod

Skopiuj kod do schowka

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

Referencja opcji

Te opcje mogą być przekazane do HTMLProvider, HTMLRenderer, useHTMLRenderer i renderHTML.

Pokaż całą zawartość tabeli

Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość

Opcja	Typ	Domyślnie	Opis
`components`	`Record<string, any>`	`{}`	Mapa tagów HTML lub niestandardowych nazw komponentów do odpowiadających im komponentów.
`renderHTML`	`Function`	`null`	Funkcja renderująca, która całkowicie zastąpi domyślny parser HTML (tylko dla providerów Vue/Svelte).

Uwaga: Dla React i Preact standardowe tagi HTML są dostarczane automatycznie. Prop components trzeba przekazać tylko wtedy, gdy chcesz je nadpisać lub dodać niestandardowe komponenty.

Markdown

Pobieranie funkcji

Historia wersji

Zawartość HTML / HTML w Intlayer

Deklarowanie treści HTML

Węzeł html()

Renderowanie HTML

Automatyczne renderowanie (z użyciem useIntlayer)

Konfiguracja globalna z HTMLProvider

Ręczne renderowanie i zaawansowane narzędzia

Komponent <HTMLRenderer />

Hook useHTMLRenderer()

Narzędzie renderHTML()

Referencja opcji

Węzeł `html()`

Automatyczne renderowanie (z użyciem `useIntlayer`)

Konfiguracja globalna z `HTMLProvider`

Komponent `<HTMLRenderer />`

Hook `useHTMLRenderer()`

Narzędzie `renderHTML()`