Internationalisering med @angular/localize

ng serve --configuration=fr

ng build --prod --localize

Det här är ett stort framsteg jämfört med tidigare Angular-versioner. vi brukade vara tvungna att bygga samma applikation för varje lokalitet,eftersom översättningen var en del av sammanställningen.När Angular nu kompilerar applikationen genererar den $localize-anrop. när detta är gjort tar ett verktyg den kompilerade applikationen och ersätter alla $localize-anrop med rätt översättningar. detta är supersnabbt. du har då ett paket som inte innehåller några $localize-anrop och alla i18n-strängar har översatts.

Förresten var du tvungen att bygga applikationen en gång per lokal, och detta var en fullständig konstruktion. Så låt oss säga att det är en 30-talsbyggnad och att du ville ha 4 lokala språk, då var du ute efter 2 minuter.

Med det nya tillvägagångssättet görs kompileringen en gång och sedan genereras de olika i18n-versionerna på några få sekunder (de genereras till och med parallellt om det är möjligt).Så du går från 2 minuter till ~40 sekunder! 🌈

Du har då flera buntar, en per lokal, och du kan servera den lämpliga till dina användare beroende på deras preferenser som du brukade göra.

Denna strategi kallas compile-time inlining eftersom du inline översättningarna direkt, och sedan finns det inget kvar att göra vid körtid.

Nu ska vi prata om något som fortfarande är odokumenterat, som kan förändras i framtiden, men som ändå är intressant att veta:vi kan nu också översätta meddelanden i vår TypeScript-kod!

Den $localize-funktion som jag har pratat omkan användas direkt. Det är en märklig funktion som du kan använda för att tagga en mallsträng för lokalisering.

Men vi kanske ska börja med att förklara vad en taggad mallsträng är?

Mallsträngar och taggfunktioner

När du använder mallsträngar kan du definiera en taggfunktion,och tillämpa den på en mallsträng.Här lägger askQuestion till en förhörspunkt i slutet av strängen:

const askQuestion = strings => strings + '?';const template = askQuestion`Is anyone here`;

Så vad är skillnaden med en enkel funktion?Tag-funktionen tar i själva verket emot flera argument:

• en array av strängens statiska delar
• värdena som är resultatet av utvärderingen av uttrycken

Till exempel om vi har en mallsträng som innehåller uttryck:

const person1 = 'Cedric';const person2 = 'Agnes';const template = `Hello ${person1}! Where is ${person2}?`;

const uppercaseNames = (strings, ...values) => { // `strings` is an array with the static parts // `values` is an array with the evaluated expressions const names = values.map(name => name.toUpperCase()); // `names` now has // let's merge the `strings` and `names` arrays return strings.map((string, i) => `${string}${names ? names : ''}`).join('');};const result = uppercaseNames`Hello ${person1}! Where is ${person2}?`;// returns 'Hello CEDRIC! Where is AGNES?'

@Component({ template: '{{ title }}'})export class HomeComponent { title = $localize`You have 10 users`;}

No translation found for "6480943972743237078" ("You have 10 users").

<trans-unit> <source>You have 10 users</source> <target>Vous avez 10 utilisateurs</target></trans-unit>

title = $localize`Hi ${this.name}! You have ${this.users.length} users.`;

<trans-unit> <source>Hi <x/>! You have <x/> users.</source> <target>Bonjour <x/>&nbsp;! Vous avez <x/> utilisateurs.</target></trans-unit>

title = $localize`Hi ${this.name}:name:! You have ${this.users.length}:userCount: users.`;

<trans-unit> <source>Hi <x/>! You have <x/> users.</source> <target>Bonjour <x/>&nbsp;! Vous avez <x/> utilisateurs.</target></trans-unit>

<h1 i18n="@@home.greetings">Hello</h1>

<trans-unit> <source>Hello</source> <target>Bonjour</target></trans-unit>

title = $localize`:@@home.users:You have 10 users`;

title = $localize`:greeting message with the number of users currently logged in@@home.users:You have 10 users`;

import '@angular/localize/init';import { loadTranslations } from '@angular/localize';loadTranslations({ '1815172606781074132': 'Bonjour {$name}\xa0! Vous avez {$userCount} utilisateurs.'});