Dodaj wsparcie wielojęzyczne do kątowej

W tym samouczku zabierzemy Cię przez proces udostępniania aplikacji i przyjaznych dla użytkownika dla osób na całym świecie. Tylko około 20 procent świata mówi po angielsku, więc dostarczanie innych opcji językowych może poprawić swoje doświadczenie użytkownika i znacznie zwiększyć zasięg aplikacji. Zajmujemy się wbudowaną internacjonalizację Narzędzia Kątowe i pokazujemy, jak ich poprawnie korzystać.

Jeśli budujesz witrynę, a nie aplikację, upewnij się, że masz swój zestaw narzędzi w prawo. Zobacz nasze przewodniki do najlepszych Kreator strony internetowej i top hosting by dowiedzieć się więcej.

Stworzyliśmy bardzo prostą aplikację demonstracyjną, aby zademonstrować proces. Clone go stąd a następnie postępuj zgodnie z instrukcjami instalacji.

Uruchom aplikację, aby zapoznać się z nim. Po prostu wyświetla i aktualizuje liczby losowe i wartości z różnymi kontekstami, np. Waluty, daty itp. Obejmujemy niektóre rury i funkcje używane podczas samouczka.

• 17 Naprawdę przydatne reagujące ćwiczenia projektowe

01. Kluczowe warunki dla języków wspierających

Istnieją dwa słowa, które są często używane zamiennie, mówiąc o tłumaczeniu aplikacji - internacjonalizację i lokalizację - jednak rzeczywiście oznaczają nieco inne rzeczy. Internacjonalizacja odnosi się do procesu przygotowania aplikacji do wspierania różnych języków. Natomiast lokalizacja odnosi się do procesu rzeczywiście tłumaczenia aplikacji do wymaganych języków. Zasadniczo internacjonalizacja jest czymś, co robisz raz na aplikację, a lokalizacja zdarza się raz na lokalizację - przynajmniej to plan.

Terminy te mogą również znać w skróconych wersjach: I18n (gdzie 18 jest liczba liter między pierwszym "i" i ostatnią "n" międzynarodową) i L10N (gdzie 10 jest liczba liter między "i" i "n" lokalizacji).

02. Co jest lokalizacyjna?

Na całym świecie używane jest ponad 6000 języków, z których większość jest używana tylko przez bardzo małe grupy ludzi. Jednak nawet skupimy się tylko na trzema trzech językach - mandaryńskim, hiszpańskim i angielskim - będą istotne różnice w formatowaniu daty, struktury gramatycznej, pluralizacji i formatowania numerów.

Jeśli uwzględnimy piąty najczęściej używany język - arabski - napotykamy kolejną różnicę; Arabski jest skryptem prawej do lewej (RTL), co oznacza, że ​​UI będzie musiała być odzwierciedlona.

Tak w trakcie lokalizacji musimy rozważyć gramatykę, układ i formatowanie różnic, a oczywiście musimy również zmienić sam tekst. Kątowy może pomóc w wielu z tego, ale nadal będziesz musiał ręcznie przetłumaczyć tekst (i zapisać tłumaczenie magazyn w chmurze , więc jest bezpieczny i udostępniony ze swoim zespołem).

03. Lokalizacje w kątowym

Będziemy musieli lokalizować za każdą lokalizację, którą musimy wspierać. Local odnosi się do ogólnego zestawu preferencji w zakresie wspomnianych powyżej rozważań, które mają tendencję do dzielenia się w regionie świata, zazwyczaj kraju. Każde ustawienia regionalne jest reprezentowane przez identyfikator Unicode UnCode, który określa kod językowy i rozszerzenie ustawień regionalnych.

Domyślne ustawienie kątowe jest "en-us", który jest kodem językowym "EN" (angielski), jak mówiono w regionie "USA" (Stany Zjednoczone Ameryki). Aplikacja zlokalizowana dla "En-USA" będzie subtelnie różna od aplikacji zlokalizowanej dla "EN-GB", co jest angielski, który jest używany w Wielkiej Brytanii. Na przykład w datach USA są (bafflowanie) sformatowane mm / dd / rrrr, podczas gdy tutaj w Wielkiej Brytanii stosujemy bardziej rozsądne podejście DD / mm / rrrr. Ta niewielka różnica może spowodować poważnego błędu w zrozumieniu.

Aby rzeczy ciekawe zlokalizujmy naszą aplikację demonstracyjną na język arabski, jak mówiono w Iraku, aka "Ar-IQ" i angielski, jak mówił w Wielkiej Brytanii, aka "EN-GB". Tym razem użyjemy angielskiego jako domyślnego.

04. Konfiguracja budowania

Nasz projekt demonstracyjny został stworzony za pomocą kątowego CLI, który zawiera kilka przydatnych narzędzi. Użyjemy kompilatora z wyprzedzeniem (AOT) dla tego projektu, abyśmy musimy dokonać pewnych zmian w pliku konfiguracyjnym CLIS: "Angular.json '. Jeśli chcesz używać tylko w czasie (JIT), musisz skonfigurować rzeczy nieznacznie inaczej.

Przy kompilacie AOT otrzymasz małe, szybsze renderowanie gotowej aplikacji, która ładuje się bez konieczności asynchronicznego żądań, aby pobrać rzeczy, takie jak szablony i arkusze stylów. W rezultacie musisz utworzyć kompilację dla każdej ustawień regionalnych i służyć odpowiedniej kompilacji przy użyciu adresu URL lub jakiejś rodzaju logiki wykrywania języka po stronie serwera. Najprostszym podejściem jest utworzenie katalogu dla każdego regionu, np. www.example.com/en-gb i www.example.com/ar-iq. Handonem jest to, że nie możesz przełączać języka w locie, ale w rzeczywistości, która jest mało prawdopodobna, aby była czymś wymaganym przez prawdziwych użytkowników.

Przede wszystkim musimy dodać konfigurację budowy naszego arabskiego lokalizacji. W pliku JSON poszukuje obiektu "Architect.Build.configurations". Dodaj następujący blok, aby zdefiniować konfigurację dla lokalizacji:

 "Ar-IQ": {
    "Basehref": "/ AR-IQ /",
    "deployurl": "/ AR-IQ /",
    "WyjściePath": "DEST / KANICE-I18N-DEMO /
ar-iq ",
    "I18NFile": "SRC / Locale / Wiadomości.AR-IQ.
xlf ",
    "I18nformat": "XLF",
    "I18nLocale": "Ar-IQ" 

Ta konfiguracja informuje kątowa, gdzie wyjeżdża kompilację kompilacji i które przesyłają pliki i format. Ustawia również ustawienia regionalne i informuje kanciasty, który katalog zostanie wdrożony.

Musimy również zmodyfikować domyślne opcje w "Architect.Build.Options", aby użyć lokalizacji "EN-GB". Ustaw następujące właściwości, jak pokazano. Uwaga Włączamy AOT tutaj w całym Zarządzie, więc zostaną wykorzystane do budowy produkcji i rozwoju:

 "WyjściePath": "DEST / Kąt-I18N-Demo /
EN-GB ",
  "I18nLocale": "EN-GB",
  "deployurl": "/ en-gb /",
  "BaseHref": "/ EN-GB /",
  "Aot": Prawda 

Kątowa obsługuje wiele miejsc. Upewnij się, że używasz prawidłowej wartości nieruchomości "I18nlocale". Możesz zobaczyć pełną listę tutaj .

Za scenami Powyższe konfiguracje po prostu ładują i odczytywają z jednego z tych plików preferencji ustawień regionalnych.

05. Podaj konfigurację

Oprócz konfigurowania wyjścia budowy musimy również skonfigurować konfigurację dla polecenia "Ng Serve" dla rozwoju. Jest to bardziej proste, ponieważ możemy po prostu odwołać się do konfiguracji kompilacji, którą właśnie dodaliśmy. W "Angular.json" Dodaj następujący blok na "Architect.Serve.configurations":

 "Ar-IQ": {
    "Browersertarget": "Kąt-I18N-
Demo: Buduj: Ar-IQ ",
    "Servepath": "/ AR-IQ /"
  } 

Tutaj odnosimy opcje konfiguracji kompilacji za pomocą własności "Browsertarget", a także ustawić "servepath". Zanim będziemy mogli służyć lub zbudować aplikację arabską, musimy utworzyć plik tłumaczenia, do których wymienić "I18NFile" właściwość powyżej. Kątowy CLI zawiera narzędzie do wyodrębniania flagowanego tekstu w pliku źródłowym klasy standardowej.

Zajmujemy te pliki bardziej szczegółowo w samouczku, ale na razie musimy wystawać do eksportowania podstawowego, pustego pliku, aby umożliwić nam kompilację.

Użyjemy polecenia "NG XI18N" z następującymi opcjami. To jedyny czas, abyśmy uwzględnili identyfikator lokalizacji w nazwie "--out-file":

 $ ng XI18N --Output-Path Locale --out-Plik
Wiadomości.AR-IQ.XLF --I18N-Locale AR-IQ 

Powinien to utworzyć plik w katalogu SRC / Locale. Od teraz zawsze wyświetlymy plik o nazwie "wiadomości.xlf" i ręcznie skopiuj go w wersji z identyfikatorem lokalizacji w nazwie. Powodem tego jest, aby zapobiec nadpisywaniu narzędzia do wydobycia jakichkolwiek istniejących tłumaczeń dodaliśmy do pliku.

06. Konfiguracja przełączania

W tym momencie możemy teraz skompilować projekt i zobaczyć, co się stanie, ale musimy powiedzieć polecenie "Ng Serve", która konfiguracja użycia. Najpierw spójrzmy na wersję angielską. Nie ma tu zmian, ponieważ angielski jest domyślny:

 $ ng służy 

Jak widać, wygląda podobnie jak oryginalna wersja, która wykorzystuje domyślne ustawienia kątowe "en-us". Godną znaczącą różnicą jest waluta teraz określa US $ zamiast tylko $. Dobra, spróbujmy teraz wypróbować wersję arabską. Zatrzymaj wersję angielską i uruchom:

 $ Ng Serve --Configuration = AR-IQ 

Jak można oczekiwać, że w tej wersji jest bardziej oczywiste różnice, w szczególności data jest teraz napisana w języku arabskim. Kątowa może to zrobić, ponieważ nazwy niektórych rzeczy, takich jak miesiące i dni, pochodzą z ustalonej listy, a ostatecznie odnoszą się do znanej liczby. Wszystko inne jest jednak nadal w języku angielskim.

07. Rury locale-świadome

Przyjrzyj się bliżej kodu źródłowego "app.component.html", a zobaczysz, że używamy wielu różnych rur. Poniższe rury kątowe są narodowe, co oznacza, że ​​dostosowywają ich produkcję na podstawie bieżących ustawień lokalnych: "DatePipe", "Currencipipe", "dziewialnik" i "perspondencję".

Jeśli używasz tych rur starannie kątowych, obsługuje dla ciebie wiele lokalizacyjnych Legwork dla Ciebie. Ostrożnie mamy na myśli, że korzystaj z dostępnych predefiniowanych opcji, gdziekolwiek możesz. Dobrym przykładem jest formatowanie daty amerykańskiej VS Wielkiej Brytanii, wspomnialiśmy wcześniej. Jeśli jesteś w Wielkiej Brytanii i chcesz wyświetlić datę za pomocą (rozsądnego) formatu dziennego miesiąca, możesz być sfrustrowany, aby znaleźć, że opcja predefiniowanego "" ShortDate "" renderuje jako m / d / yy (np. . 10/9/18) I pokusiłem, aby utwardzony wybrany format taki jak:

 {{mydate | Data: "dd / mm / y '}} 

Ale teraz wiemy, że otrzymujemy format m / d / yy, ponieważ kanciasty domyślnie używa lokalizacji "EN-US". Więc zamiast hardcoding format, powinniśmy korzystać z opcji "" ShortDate "'i zlokalizować naszą aplikację do użycia" EN-GB ".

 {{mydate | Data: "Shortstate '}} 

Potrzeba drobnego wysiłku, ale możemy dodać lokalizacje do treści naszego serca i zawsze mieć przyjazny dla użytkownika format daty.

08. Przeprowadzanie predefiniowanych opcji

Niestety nie wydaje się, że istnieje łatwy, wbudowany sposób na zastąpienie predefiniowanego formatu. Na przykład nie możesz po prostu zdecydować, że wolisz format "Shortstate" ", aby być DD / MM / YYYY zamiast DD / MM / Y, ponieważ nie ma możliwości modyfikacji formatu w czasie wykonywania. Również nie możesz dodać własnych predefiniowanych opcji.

W przypadku tych przypadków krawędzi można utworzyć rurę daty niestandardowej, która zawija kątową "datepipe" i obsługuje wszelkie niestandardowe formaty per-locale. Wszystko, co nie rozpoznaje, zostanie przekazana do wbudowanego "datepiady".

09. Currencipipe.

Off półki "Currencipipe" sformatuje liczbę jako dolary amerykańskie, przycinanie do dwóch miejsc dziesiętnych i dodawać ugrupowania określone w preferencjach lokalizacji.

Zauważysz, że w obu naszych lokalizacjach waluta jest zawsze w dolarach amerykańskich. Nie jest magicznie przełączaj się na Sterling (GBP), gdy używasz lokalizacji "EN-GB". Powodem tego jest to, że 10 GBP nie jest tak samo jak 10 USD, więc musisz wyraźnie określić walutę, do której odnosi się.

Zaktualizujmy "app.component.html", aby korzystać z GBP przez cały czas. Przy określaniu kodu walutowego należy użyć prawidłowej wartości ze standardu ISO 4217 (lista dostępna online).

Zmodyfikuj dwie rury walutowe, dodając ":" GBP "jak więc:

 {{wartość $ | async |. Waluta: "GBP '}} 

I zaczniesz widzieć symbol £ zamiast US $.

Pamiętaj, że nie robi niczego jak automatycznie konwertować USD do równoważnej wartości w GBP, jeśli zmienisz walutę - po prostu zmienia symbol, którego używa.

10. Przepływ pracy

W porządku, więc mamy nasze dwa lokale lokalne, a kątowo potrafimy wykonywać niektóre z pracy dla nas z pudełka, ale tekst jest nadal w języku angielskim. Kątowy nie może tłumaczyć tego automatycznie, ale może pomóc nam z częściami przepływu pracy. To jest to, co ma się wydarzyć:

• Flag Statyczny tekst we wszystkich komponentach do tłumaczenia
• Eksportuj plik tłumaczenia zawierający ten tekst statyczny
• Zmodyfikuj plik tłumaczenia i dodaj odpowiednie tłumaczenia
• Połącz przetłumaczony plik tłumaczenia z powrotem do aplikacji

Kątowa pomaga nam z krokami 2 i 4, ale jako deweloperzy, których potrzebujemy robić krok 1 ręcznie. Krok 3 zazwyczaj wypełniłby profesjonalistę tłumaczącą lub agencję, używając specjalnego oprogramowania do odczytu i aktualizacji pliku tłumaczenia.

11. Szczegóły osi

Aby to osiągnąć, musimy dodać specjalny atrybut do każdego elementu zawierającego stały tekst do przetłumaczenia. Aby być jasnym, jeśli zawartość przybywa z interfejsu API, to nie jest stały tekst i trzeba lokować to w API. Musisz tylko dodać atrybut, gdy tekst jest zapisany bezpośrednio w szablonie HTML w kodzie źródłowym. Kluczowym punktem jest to, że powinieneś próbować przechowywać pliki maszynopisów lokalnych-agnostic - innymi słowy, unikać umieszczania dowolnego tekstu, który należy przetłumaczyć w logikę komponentu i utrzymywać wszystko w szablonach. W przeciwnym razie narzędzie do ekstrakcji nie będzie w stanie go wyodrębnić. I tak jest dobra praktyka, aby oddzielić twoje obawy - w życiu i w kodzie.

Otwórzmy "app.comPonent.html" i zacznij od tytułu "bieżącej wartości". Po prostu dodaj atrybut "I18N" do elementu, który bezpośrednio zawiera tekst.