Angular Academy · Lekcja

Oznaczanie tekstu do tłumaczenia

Używać atrybutów i18n do oznaczania tekstu do tłumaczenia

Oznaczanie tekstu do tłumaczenia to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co rozwiązuje internacjonalizacja

Internacjonalizacja (i18n) polega na przygotowaniu aplikacji tak, aby jej tekst można było tłumaczyć na inne języki bez zmieniania kodu. Angular ma wbudowany system i18n oparty na oznaczaniu tekstu do tłumaczenia w szablonach za pomocą atrybutu i18n.

Atrybut i18n

Dodaj atrybut i18n do każdego elementu, którego tekst powinien być tłumaczony. Angular zbiera takie elementy podczas kompilacji i zastępuje ich zawartość odpowiednią wersją dla danej lokalizacji.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

Tłumaczenie atrybutów

Aby tłumaczyć atrybut HTML, taki jak title lub placeholder, poprzedź jego nazwę prefiksem i18n-.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

Znaczenie i opis

Możesz przekazać tłumaczom kontekst za pomocą składni i18n="meaning|description". Znaczenie grupuje identyczne wyrażenia, które powinny mieć to samo tłumaczenie, a opis wyjaśnia sposób użycia.

<button i18n="cta|The main call to action on the home page">Get started</button>

Niestandardowe identyfikatory

Dodaj stabilny niestandardowy identyfikator po @@, aby tłumaczenie przetrwało edycję tekstu. Bez niego zmiana tekstu źródłowego wygeneruje nowy identyfikator i spowoduje utratę istniejącego tłumaczenia.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

Interpolacje w tłumaczonym tekście

Wiązania znajdujące się w tłumaczonym tekście stają się symbolami zastępczymi. Tłumacze widzą nazwany token, który mogą przenieść w odpowiednie miejsce dla swojego języka.

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

Oznaczanie tekstu w komponentach za pomocą $localize

W przypadku ciągów znaków w TypeScript (a nie w szablonach) oznacz je za pomocą $localize. Oznacza to ciąg do wyodrębnienia, tak samo jak atrybut i18n robi to dla szablonów.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

Dlaczego nie wystarczy po prostu łączyć ciągów znaków

Umieszczanie tekstu na stałe i łączenie ciągów ('You have ' + n + ' items') utrudnia tłumaczenie: kolejność słów różni się w zależności od języka, a reguły liczby mnogiej są różne. Oznaczanie całych fraz za pomocą i18n pozwala tłumaczom zachować poprawną gramatykę.

Tłumaczenie zagnieżdżonych znaczników

Gdy tłumaczony tekst zawiera elementy podrzędne, Angular zachowuje je jako symbole zastępcze, dzięki czemu tłumacze nie mogą przypadkowo usunąć znaczników.

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

Zachowywanie przejrzystości tekstu źródłowego

Oznaczaj tekst w najmniejszej rozsądnej jednostce, zwykle w całym zdaniu lub etykiecie. Unikaj dzielenia jednego zdania na wiele bloków i18n, ponieważ każdy fragment staje się osobnym, trudniejszym do przetłumaczenia ciągiem.

Co dzieje się podczas kompilacji

Sam atrybut i18n nie powoduje żadnego kosztu w czasie działania: Angular zastępuje oznaczony tekst podczas kompilacji dla każdej lokalizacji, tworząc osobny zoptymalizowany bundle. W kolejnych lekcjach wyodrębnimy te ciągi i je przetłumaczymy.

Szybkie sprawdzenie

Jak przetłumaczyć atrybut placeholder?

Podsumowanie

Oznaczaj tekst w szablonach atrybutem i18n, a atrybuty za pomocą i18n-attr. Dodaj meaning|description jako kontekst oraz @@customId jako stabilny identyfikator. Wiązania stają się symbolami zastępczymi, a ciągi znaków TypeScript używają $localize. Oznaczanie nie powoduje żadnego kosztu w czasie działania.

Często zadawane pytania

Czy lekcja „Oznaczanie tekstu do tłumaczenia” jest bezpłatna?

Tak — pełny tekst „Oznaczanie tekstu do tłumaczenia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Oznaczanie tekstu do tłumaczenia”?

Używać atrybutów i18n do oznaczania tekstu do tłumaczenia Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Oznaczanie tekstu do tłumaczenia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy