Markering af tekst til oversættelse
Brug i18n-attributter til at markere tekst, der kan oversættes.
Markering af tekst til oversættelse er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad internationalisering løser
Internationalisering (i18n) betyder, at du forbereder din app, så teksten kan oversættes til andre sprog uden at ændre koden. Angular har et indbygget i18n-system, der bygger på, at tekst, som kan oversættes, markeres i skabeloner med attributten i18n.
Attributten i18n
Tilføj attributten i18n til ethvert element, hvis tekst skal oversættes. Angular indsamler disse elementer ved byggetid og erstatter indholdet for den enkelte lokalitet.
<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>Oversættelse af attributter
Hvis du vil oversætte en HTML-attribut som title eller placeholder, skal du sætte i18n- foran den.
<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />Betydning og beskrivelse
Du kan give oversættere kontekst med syntaksen i18n="meaning|description". Betydningen samler identiske formuleringer, der bør have samme oversættelse, mens beskrivelsen forklarer anvendelsen.
<button i18n="cta|The main call to action on the home page">Get started</button>Tilpassede id'er
Tilføj et stabilt tilpasset id efter @@, så en oversættelse bevares, når teksten redigeres. Uden id'et opretter en ændring af kildeteksten et nyt id, og den eksisterende oversættelse går tabt.
<h1 i18n="@@homeTitle">Welcome to our store</h1>Interpolationer i oversat tekst
Bindinger i oversat tekst bliver til pladsholdere. Oversættere ser et navngivet symbol, som de kan flytte, så det passer til deres sprog.
<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>Markering af tekst i komponenter med $localize
For strenge i TypeScript (ikke skabeloner) skal du markere dem med $localize. Det markerer strengen til udtræk på samme måde, som attributten i18n gør det for skabeloner.
const greeting = $localize('Welcome back'); // tagged-template form, marked for extractionHvorfor du ikke bare skal sammenkæde strenge
Hardcodet og sammenkædet tekst ('You have ' + n + ' items') ødelægger oversættelsen: ordrækkefølgen varierer fra sprog til sprog, og reglerne for ental og flertal er forskellige. Når du markerer hele formuleringer med i18n, kan oversætterne bevare grammatikken.
Oversættelse af indlejret markup
Når tekst, der kan oversættes, indeholder underordnede elementer, bevarer Angular dem som pladsholdere, så oversættere ikke ved et uheld kan fjerne markuppen.
<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>Hold kildeteksten ren
Markér tekst på den mindste fornuftige enhed, som regel en hel sætning eller et mærkat. Undgå at opdele én sætning i flere i18n-blokke, da hvert fragment bliver en separat streng, som er vanskeligere at oversætte.
Hvad der sker ved byggetid
Attributten i18n medfører ingen omkostning ved kørsel: Angular erstatter markeret tekst under kompileringen for hver lokalitet og genererer en separat optimeret bundle. I de næste lektioner udtrækker og oversætter vi disse strenge.
Hurtigt tjek
Hvordan oversætter du en placeholder-attribut?
Opsummering
Markér tekst i skabeloner med attributten i18n og attributter med i18n-attr. Tilføj meaning|description for kontekst og @@customId for stabile id'er. Bindinger bliver til pladsholdere, og TypeScript-strenge bruger $localize. Markeringen medfører ingen omkostning ved kørsel.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Markering af tekst til oversættelse” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Markering af tekst til oversættelse”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Markering af tekst til oversættelse”?
Brug i18n-attributter til at markere tekst, der kan oversættes. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Markering af tekst til oversættelse”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Markering af tekst til oversættelse
- Udtræk og oversættelse af meddelelser
- Flertalsformer og Select (ICU)
- Opbygning af lokaliserede bundles