Προσθέστε την πολυγλωσσική υποστήριξη στο γωνιακό

Σε αυτό το σεμινάριο πρόκειται να σας μεταφέρουμε τη διαδικασία κάνοντας την εφαρμογή σας προσβάσιμα και φιλικά προς το χρήστη για τους ανθρώπους σε όλο τον κόσμο. Μόνο το 20% του κόσμου μιλάει αγγλικά, η παροχή άλλων επιλογών γλώσσας μπορεί να βελτιώσει την εμπειρία των χρηστών σας και να αυξήσει σημαντικά την προσάρτησή σας. Θα ρίξουμε μια ματιά στα ενσωματωμένα εργαλεία διεθνοποίησης της γωνιακής διεθνοποίησης και θα σας δείξουμε πώς να τα χρησιμοποιήσετε σωστά.

Εάν δημιουργείτε έναν ιστότοπο αντί για μια εφαρμογή, βεβαιωθείτε ότι έχετε το δικαίωμα εργαλείων σας. Δείτε τους οδηγούς μας στο καλύτερο οικοδόμος ιστότοπου και κορυφή web hosting για να μάθετε περισσότερα.

Δημιουργήσαμε μια πολύ απλή εφαρμογή επίδειξης για να αποδείξει τη διαδικασία. Κλώνησε από εδώ και στη συνέχεια ακολουθήστε τις οδηγίες εγκατάστασης.

Ξεκινήστε την εφαρμογή για να εξοικειωθείτε με αυτό. Εμφανίζει και ενημερώνει τους τυχαίους αριθμούς και τιμές με διαφορετικά πλαίσια, π.χ. Νομίσματα, ημερομηνίες κλπ. Θα καλύψουμε ορισμένους από τους σωλήνες και τα χαρακτηριστικά που χρησιμοποιούνται κατά τη διάρκεια του σεμινάριο.

• 17 Πραγματικά χρήσιμα ανταπόκριση σεμινάρια σχεδιασμού

01. Βασικοί όροι για τη στήριξη των γλωσσών

Υπάρχουν δύο λέξεις που χρησιμοποιούνται συχνά εναλλακτικά όταν μιλάμε για τη μετάφραση μιας εφαρμογής - διεθνοποίησης και εντοπισμού - ωστόσο, πραγματικά σημαίνουν ελαφρώς διαφορετικά πράγματα. Η διεθνοποίηση αναφέρεται στη διαδικασία προετοιμασίας της εφαρμογής σας για την υποστήριξη διαφόρων γλωσσών. Αντίθετα, ο εντοπισμός αναφέρεται στη διαδικασία της πραγματικής μεταφράζοντας την εφαρμογή σας στις απαιτούμενες γλώσσες σας. Ουσιαστικά η διεθνοποίηση είναι κάτι που κάνεις μία φορά ανά εφαρμογή και ο εντοπισμός συμβαίνει μία φορά ανά τοποθέτηση - τουλάχιστον αυτό είναι το σχέδιο.

Αυτοί οι όροι ενδέχεται επίσης να είναι εξοικειωμένοι στις συντομευμένες εκδόσεις τους: i18n (όπου 18 είναι ο αριθμός των επιστολών μεταξύ του πρώτου «εγώ» όσο και η τελευταία «n» της διεθνοποίησης) και του L10N (όπου 10 είναι ο αριθμός των επιστολών μεταξύ του 'I' και το «n» του εντοπισμού).

02. Τι εντοπισμός;

Υπάρχουν πάνω από 6.000 γλώσσες που χρησιμοποιούνται σε όλο τον κόσμο σήμερα, τα περισσότερα από τα οποία χρησιμοποιούνται μόνο από πολύ μικρές ομάδες ανθρώπων. Ωστόσο, ακόμη και αν επικεντρωθούμε μόνο στις τρεις πρώτες γλώσσες - μανταρίνι, ισπανικά και αγγλικά - θα υπάρξουν σημαντικές διαφορές στη μορφοποίηση ημερομηνίας, γραμματικής δομής, της πλουραλής και μορφοποίησης αριθμών.

Εάν συμπεριλάβουμε την πέμπτη πιο ευρέως χρησιμοποιούμενη γλώσσα - αραβικά - αντιμετωπίζουμε μια άλλη διαφορά. Το αραβικό είναι ένα δεξιό-αριστερό (RTL) σενάριο που σημαίνει ότι το UI θα πρέπει επίσης να αντικατοπτρίζεται.

Έτσι κατά τη διάρκεια του εντοπισμού πρέπει να εξετάσουμε τη γραμματική, τη διάταξη και τη μορφοποίηση των διαφορών, και φυσικά, πρέπει επίσης να αλλάξουμε το ίδιο το κείμενο. Το γωνιακό μπορεί να βοηθήσει με πολλά από αυτά, αλλά θα πρέπει ακόμα να μεταφράσετε χειροκίνητα το κείμενο (και να αποθηκεύσετε τη μετάφραση στο αποθήκευση σύννεφων , οπότε είναι ασφαλές και κοινόχρηστο με την ομάδα σας).

03. Τοποθετεί σε γωνιακό

Θα χρειαστεί να εντοπίσουμε για κάθε τοπική βάση, πρέπει να υποστηρίξουμε. Ένας εντοπισμός αναφέρεται στο γενικό σύνολο προτιμήσεων για τις προαναφερθείσες σκέψεις που τείνουν να μοιράζονται μέσα σε μια περιοχή του κόσμου, συνήθως μια χώρα. Κάθε τοπική τοποθέτηση αντιπροσωπεύεται από ένα αναγνωριστικό εντοπισμού unicode, ο οποίος καθορίζει τον κώδικα γλώσσας και την επέκταση του τοπικού.

Η προεπιλεγμένη τοπική περιοχή της γωνίας είναι «EN-US», ο οποίος είναι ο κώδικας γλώσσας «EL» (Αγγλικά) όπως μιλήθηκε στην περιοχή των ΗΠΑ »(Ηνωμένες Πολιτείες της Αμερικής). Μια εφαρμογή που εντοπίζεται για το «EN-US» θα είναι εξαιρετικά διαφορετικό από μια εφαρμογή που εντοπίζεται για το «EN-GB» το οποίο είναι αγγλικό όπως μιλήθηκε στη Μεγάλη Βρετανία. Για παράδειγμα, στις Ημερομηνίες των ΗΠΑ είναι (Bafflingly) μορφοποιημένα MM / DD / YYYY, ενώ εδώ στο Ηνωμένο Βασίλειο χρησιμοποιούμε την πιο λογική προσέγγιση DD / MM / YYYY. Αυτή η μικρή διαφορά μπορεί να οδηγήσει σε σημαντικό σφάλμα στην κατανόηση.

Για να κάνουμε τα πράγματα ενδιαφέρον ας εντοπίσουμε την εφαρμογή επίδειξης για τα αραβικά, όπως μιλήσαμε στο Ιράκ, γνωστοποιήστε στο Ιράκ, γνωστές και στα αγγλικά όπως μιλήσαμε στο Ηνωμένο Βασίλειο, γνωστός και ως «en-gb». Θα χρησιμοποιήσουμε αγγλικά ως προεπιλογή αυτή τη φορά.

04. Κατασκευάστε τη διαμόρφωση

Το έργο επίδειξης δημιουργήθηκε χρησιμοποιώντας γωνιακό CLI, το οποίο περιλαμβάνει κάποια χρήσιμα εργαλεία. Θα χρησιμοποιήσουμε τον μεταγλωττιστή μπροστά (AOT) για αυτό το έργο, ώστε να χρειαστεί να κάνουμε κάποιες αλλαγές στο αρχείο διαμόρφωσης του CLI: «angular.json». Εάν θέλετε να χρησιμοποιήσετε το Just-In-Time (JIT), πρέπει να διαμορφώσετε τα πράγματα ελαφρώς διαφορετικά.

Με ένα Aot Build μπορείτε να πάρετε μια μικρή, ταχύτερη εφαρμογή έτοιμο προς μετάβαση που φορτώνει χωρίς την ανάγκη ασύγχρονων αιτημάτων για να φέρει τα πράγματα όπως τα πρότυπα και τα φύλλα στυλ. Ως αποτέλεσμα, πρέπει να δημιουργήσετε μια κατασκευή για κάθε τοπική τοπία και να εξυπηρετήσετε την κατάλληλη κατασκευή χρησιμοποιώντας τη διεύθυνση URL ή κάποιο είδος λογικής ανίχνευσης γλώσσας από το διακομιστή. Η απλούστερη προσέγγιση είναι να δημιουργήσετε έναν κατάλογο για κάθε τοπική περιοχή, π.χ. www.example.com/en-gb και www.example.com/ar-iq. Το εμπόριο είναι ότι δεν μπορείτε να αλλάξετε τη γλώσσα στην πτήση, αλλά στην πραγματικότητα είναι απίθανο να είναι κάτι που απαιτείται από τους πραγματικούς χρήστες.

Πρώτα απ 'όλα πρέπει να προσθέσουμε μια διαμόρφωση κατασκευής για την αραβική μας τοπική. Στο αρχείο JSON αναζητήστε το αντικείμενο του 'Architect.Build.configurations'. Προσθέστε το παρακάτω μπλοκ για να ορίσετε μια διαμόρφωση για την τοπική βάση:

 "AR-IQ": {
    "Basehref": "/ AR-IQ /",
    "Deployurl": "/ ar-IQ /",
    "Έξοδος": "Dist / γωνιακό-i18n-demo /
AR-IQ ",
    "I18NFile": "Src / Locale / μηνύματα.Αρ-IQ.
XLF ",
    "I18NFormat": "XLF",
    "I18Nlocale": "AR-IQ" 

Αυτή η διαμόρφωση λέει γωνιακό πού να εξάγει την καταρτισμένη κατασκευή και το οποίο μεταφράζεται αρχείο και μορφή για χρήση. Ορίζει επίσης την τοπική και λέει γωνιακό κατάλογος που θα αναπτυχθεί η εφαρμογή.

Πρέπει επίσης να τροποποιήσουμε τις προεπιλεγμένες επιλογές στο 'Architect.Build.Options' για να χρησιμοποιήσετε το Locale 'EN-GB'. Ορίστε τις ακόλουθες ιδιότητες όπως φαίνεται. Σημείωση Ενεργοποιούμε AOT εδώ σε ολόκληρο το σκάφος, ώστε να χρησιμοποιηθεί για την παραγωγή και την ανάπτυξη Builds:

 "Έξοδος": "Dist / Angular-I18N-Demo /
en-gb ",
  "I18Nlocale": "EN-GB",
  "Deployurl": "/ en-gb /",
  "Basehref": "/ en-gb /",
  "Aot": TRUE 

Η γωνιακή υποστηρίζει ορισμένους τοπικούς. Βεβαιωθείτε ότι χρησιμοποιείτε τη σωστή τιμή για την ιδιότητα 'I18Nlocale'. Μπορείτε να δείτε την πλήρη λίστα εδώ .

Πίσω από τις σκηνές οι παραπάνω διαμορφώσεις απλά φορτώνουν και διαβάζονται από ένα από αυτά τα αρχεία προτιμήσεων τοπίου.

05. Σερβίρετε τη διαμόρφωση

Εκτός από τη διαμόρφωση της παραγωγής κατασκευής, πρέπει επίσης να δημιουργήσουμε τη διαμόρφωση για την εντολή "Orbe Serve" για ανάπτυξη. Αυτό είναι πιο απλό, καθώς μπορούμε απλά να αναφέραμε τη διαμόρφωση της κατασκευής που μόλις προσθέσαμε. Στο "Angular.json" προσθέστε το ακόλουθο μπλοκ στο "Αρχιτέκτονας". Confulfigurations:

 "AR-IQ": {
    "Browsertarget": "Γωνιακό-i18n-
Demo: Build: AR-IQ ",
    "Servepath": "/ AR-IQ /"
  } 

Εδώ αναφέρουμε τις επιλογές διαμόρφωσης κατασκευής χρησιμοποιώντας την ιδιότητα "Browsertarget" και θέτουμε επίσης το «ServePath». Πριν μπορέσουμε να εξυπηρετήσουμε ή να οικοδομήσουμε την αραβική εφαρμογή, πρέπει να δημιουργήσουμε το αρχείο μεταφράσεων που αναφέρονται στην ιδιότητα του 'I18NFile' παραπάνω. Το γωνιακό CLI περιλαμβάνει ένα εργαλείο για την εξαγωγή κειμένου που έχει επισημανθεί σε ένα αρχείο προέλευσης μεταφραστικής μεταφραστικής βιομηχανίας.

Θα καλύψουμε αυτά τα αρχεία λεπτομερέστερα αργότερα στο σεμινάριο, αλλά για τώρα πρέπει απλά να εξάγει το βασικό, άδειο αρχείο για να μας επιτρέψει να καταρτίσουμε.

Θα χρησιμοποιήσουμε την εντολή "ng xi18n" με τις ακόλουθες επιλογές. Αυτή είναι η μόνη φορά που θα συμπεριλάβουμε το id locale στο αρχείο αρχείου '- File':

 $ ng xi18n - output-path locale - out-file
Μηνύματα.Αρ-IQ.XLF --I18N-LOCALE AR-IQ 

Αυτό θα δημιουργήσει ένα αρχείο σε έναν κατάλογο SRC / locale. Από τώρα και στο εξής, θα εξάθουμε πάντα το αρχείο που ονομάζεται 'Message.xlf' και το αντιγράψτε με μη αυτόματο τρόπο την έκδοση με το id locale στο όνομα. Ο λόγος για αυτό είναι να αποφευχθεί η αντικατάσταση του εργαλείου εξόρυξης τυχόν υφιστάμενων μεταφράσεων που προσθέσαμε στο αρχείο.

06. Διαμόρφωση διαμόρφωσης

Σε αυτό το σημείο μπορούμε τώρα να καταρτίσουμε το έργο και να δούμε τι συμβαίνει, αλλά πρέπει να πούμε την εντολή "NG εξυπηρετούν" η οποία διαμόρφωση στη χρήση. Πρώτα ας ρίξουμε μια ματιά στην αγγλική έκδοση. Δεν υπάρχουν αλλαγές εδώ επειδή τα αγγλικά είναι η προεπιλογή:

 $ ng σερβίρετε 

Όπως μπορείτε να δείτε, μοιάζει πολύ με την αρχική έκδοση, η οποία χρησιμοποιεί την προεπιλεγμένη τοπική τοποθέτηση της γωνιακής «EN-US». Η αξιοσημείωτη διαφορά είναι το νόμισμα που καθορίζει τώρα το US $ αντί για μόλις $. Εντάξει, τώρα ας δοκιμάσουμε την αραβική έκδοση. Σταματήστε την αγγλική έκδοση και εκτελέστε:

 $ NG SERVE --Configuration = AR-IQ 

Όπως θα περίμενε κανείς ότι υπάρχουν πιο προφανείς διαφορές σε αυτή την έκδοση, ιδίως η ημερομηνία που γράφεται τώρα στα αραβικά. Οι γωνιακοί μπορούν να το κάνουν αυτό επειδή τα ονόματα ορισμένων πραγμάτων, όπως μήνες και ημέρες, προέρχονται από μια καθορισμένη λίστα και τελικά σχετίζονται με έναν γνωστό αριθμό. Οτιδήποτε άλλο, ωστόσο, είναι ακόμα στα αγγλικά.

07. Σωλήνες ευαισθητοποίησης locale

Πάρτε μια πιο προσεκτική ματιά στον πηγαίο κώδικα του 'App.comPonent.html' και θα δείτε ότι χρησιμοποιούμε έναν αριθμό διαφορετικών σωλήνων. Οι ακόλουθοι γωνιακοί σωλήνες είναι ευαισθητοποιημένοι, πράγμα που σημαίνει ότι προσαρμόζουν την έξοδό τους με βάση την τρέχουσα τοπική τοποθέτηση: «MatePipe», «Currencypipe», «Decimalpipe» και «επικεφαλής».

Εάν χρησιμοποιείτε αυτούς τους σωλήνες προσεκτικά γωνιακό θα χειριστεί πολλά από τα πόδια του εντοπισμού για εσάς. Με προσεκτικά εννοούμε να χρησιμοποιούμε τις διαθέσιμες προκαθορισμένες επιλογές όπου κι αν μπορείτε. Ένα καλό παράδειγμα είναι η μορφοποίηση ημερομηνιών VS VS UK που αναφέραμε νωρίτερα. Εάν είστε στο Ηνωμένο Βασίλειο και θέλετε να εμφανίσετε μια ημερομηνία χρησιμοποιώντας τη μορφή (λογικής) ημέρας-έτους, ίσως να απογοητευτείτε να βρείτε ότι η προκαθορισμένη επιλογή '' shortdate '' renders ως m / d / yy (π.χ. . 10/9/18) και να μπείτε στον πειρασμό να σκληρύνετε το επιθυμητό σχήμα σας όπως αυτό:

 {{mydate | Ημερομηνία: 'dd / mm / y'}} 

Αλλά τώρα γνωρίζουμε ότι έχουμε τη μορφή M / D / YY επειδή η γωνιακή χρησιμοποιεί το locale 'en-US' από προεπιλογή. Έτσι, αντί να σκληρύνετε τη μορφή, πρέπει να χρησιμοποιήσουμε την επιλογή '' shortdate '' και να εντοπίσετε την εφαρμογή μας για να χρησιμοποιήσετε 'EN-GB'.

 {{mydate | Ημερομηνία: 'ShortDate'}} 

Χρειάζεται μια μικροσκοπική περισσότερη προσπάθεια, αλλά τότε μπορούμε να προσθέσουμε τοποθεσίες στο περιεχόμενο της καρδιάς μας και να έχουν πάντα μια φιλική προς το χρήστη μορφή ημερομηνίας.

08. Περπατώντας τις προκαθορισμένες επιλογές

Δυστυχώς δεν φαίνεται ότι υπάρχει ένας εύκολος, ενσωματωμένος τρόπος για να αντικαταστήσετε μια προκαθορισμένη μορφή. Για παράδειγμα, δεν μπορείτε απλά να αποφασίσετε ότι θα προτιμούσατε τη μορφή '' shortdate '' για να είναι dd / mm / yyyy αντί για dd / mm / y, καθώς δεν υπάρχει τρόπος να τροποποιήσετε τη μορφή κατά την εκτέλεση. Επίσης, δεν μπορείτε να προσθέσετε τις δικές σας προκαθορισμένες επιλογές.

Για αυτές τις περιπτώσεις που θα μπορούσατε να δημιουργήσετε ένα προσαρμοσμένο σωλήνα ημερομηνίας που περιτυλίγει το γωνιακό 'DatePipe' και χειρίζεται τυχόν προσαρμοσμένες μορφές ανά-locale. Οτιδήποτε δεν αναγνωρίζει δεν θα περάσει στο ενσωματωμένο 'DatePipe'.

09. Currencypipe

Από το ράφι το 'Currencyypipe' θα διαμορφώσει έναν αριθμό ως δολάρια ΗΠΑ, κόψτε σε δύο δεκαδικά ψηφία και προσθέστε ομάδες όπως ορίζεται στις προτιμήσεις της τοπικής τοποθέτησης.

Θα παρατηρήσετε ότι και στις δύο τοποθεσίες μας το νόμισμα είναι πάντα σε δολάρια ΗΠΑ. Δεν μεταβαίνει μαγικά στην STERLING (GBP) όταν χρησιμοποιείτε το Locale 'EN-GB'. Ο λόγος για αυτό είναι ότι £ 10 δεν είναι το ίδιο με $ 10, οπότε πρέπει να καθορίσετε ρητά το νόμισμα που αναφέρεται ο αριθμός σας.

Ας ενημερώσουμε το "App.comPonent.html" για να χρησιμοποιήσετε το GBP σε όλο το. Κατά τον καθορισμό του κωδικού νομίσματος πρέπει να χρησιμοποιήσετε τη σωστή τιμή από το πρότυπο ISO 4217 (λίστα διαθέσιμο στο διαδίκτυο).

Τροποποιήστε τους δύο σωλήνες νομισμάτων προσθέτοντας ':' GBP '' '' όπως:

 {{Τιμή $ | async | Νόμισμα: 'GBP'}} 

Και θα αρχίσετε να βλέπετε το σύμβολο £ αντί για US $.

Θυμηθείτε, δεν κάνει τίποτα έξυπνο, όπως μετατρέψτε αυτόματα το USD στην ισοδύναμη τιμή στο GBP εάν αλλάξετε το νόμισμα - αλλάζει ακριβώς το σύμβολο που χρησιμοποιεί.

10. Μετάφραση ροής εργασίας

Εντάξει, έτσι έχουμε τις δύο τοποθεσίες μας διαμορφωμένες και γωνιακές να κάνουν μερικές από τις εργασίες για εμάς έξω από το κουτί, αλλά το κείμενο είναι ακόμα στα αγγλικά. Η γωνιακή δεν μπορεί να μεταφράσει αυτόματα αυτό, δυστυχώς, αλλά μπορεί να μας βοηθήσει με τμήματα της ροής εργασίας. Αυτό πρέπει να συμβεί:

• Στατικό κείμενο σημαίας σε όλα τα εξαρτήματα για τη μετάφραση
• Εξαγωγή αρχείου μετάφρασης που περιέχει αυτό το στατικό κείμενο
• Τροποποιήστε το αρχείο μετάφρασης και προσθέστε τις σχετικές μεταφράσεις
• Συγχώνευση μεταφρασμένο αρχείο μετάφρασης πίσω στην εφαρμογή

Το γωνιακό μας βοηθάει τα βήματα 2 και 4, αλλά ως προγραμματιστές που χρειαζόμαστε να κάνουμε το βήμα 1 με το χέρι. Το βήμα 3 θα ολοκληρωθεί συνήθως από έναν επαγγελματία ή έναν οργανισμό μετάφρασης, χρησιμοποιώντας ειδικό λογισμικό για να διαβάσετε και να ενημερώσετε το αρχείο μετάφρασης.

11. Λεπτομέρειες άξονα

Για να επιτευχθεί αυτό, πρέπει να προσθέσουμε ένα ειδικό χαρακτηριστικό σε κάθε στοιχείο που περιέχει σταθερό κείμενο που θα μεταφραστεί. Για να είναι σαφές εάν το περιεχόμενο φτάσει από ένα API τότε αυτό δεν είναι σταθερό κείμενο και θα πρέπει να εντοπίσετε ότι στο API. Πρέπει μόνο να προσθέσετε το χαρακτηριστικό όταν το κείμενο είναι γραμμένο απευθείας στο πρότυπο HTML στον πηγαίο κώδικα. Ένα βασικό σημείο εδώ είναι ότι θα πρέπει να προσπαθήσετε να διατηρήσετε τα αρχεία γραμματοσειράς locale-agnostic - με άλλα λόγια, αποφύγετε να τοποθετήσετε οποιοδήποτε κείμενο που πρέπει να μεταφραστεί στη λογική του συστατικού και να το κρατήσετε όλα στα πρότυπα. Διαφορετικά, το εργαλείο εξαγωγής δεν θα είναι σε θέση να το εξάγει. Είναι καλή πρακτική ούτως ή άλλως να διαχωρίσετε τις ανησυχίες σας - στη ζωή και στον κώδικα.

Ας ανοίξουμε το 'App.comPonent.html' και ξεκινήστε με τον τίτλο "τρέχουσας τιμής". Απλά προσθέστε το χαρακτηριστικό 'I18N' στο στοιχείο που περιέχει άμεσα το κείμενο.

 & lt; div class = "meta__title" i18n & gt;
     Τρέχουσα τιμή
   & lt; / div & gt; 

Είναι σημαντικό να καταλάβετε ότι αυτό είναι απλώς ένα "χαζός" προσαρμοσμένο χαρακτηριστικό. Δεν είναι μια γωνιακή οδηγία που ενεργοποιεί οτιδήποτε κατά το χρόνο εκτέλεσης, στην πραγματικότητα, ο μεταγλωττιστής το αφαιρεί μετά τη μετάφραση.

Εν πάση περιπτώσει, ας δούμε τι συμβαίνει όταν τρέχουμε ξανά το εργαλείο εξαγωγής για να αναγεννηθεί το αρχείο μετάφρασης. Θυμηθείτε '- το αρχείο' είναι απλώς 'message.xlf' τώρα:

 $ ng xi18n - output-path locale - out-file
Μηνύματα.ΧLF --I18N-LOCALE AR-IQ 

Ανοίξτε το αρχείο εξόδου XLF και θα πρέπει να δείτε ένα νέο μπλοκ μονάδας μετάφρασης που φαίνεται κάτι τέτοιο με μερικές πρόσθετες πληροφορίες πλαισίου:

 & lt; trans-μονάδας id = "face3d45c0f0cd38b726e7798da15
3E2F8D55551 "DATATYPE =" HTML "& GT;
    & lt; πηγή & gt;
      Τρέχουσα τιμή
    & lt; / πηγή & gt; 

Μεγάλη, αυτό σημαίνει ότι το εργαλείο πήρε το χαρακτηριστικό 'i18n'. Αυτό το μακρύ αναγνωριστικό παράγεται από το εργαλείο και θα παραμείνει το ίδιο, εκτός εάν το κείμενο αλλάζει. Εάν έχετε πολλές περιπτώσεις ακριβώς το ίδιο κείμενο, όλοι θα πάρουν το ίδιο αναγνωριστικό. Μην επεξεργαστείτε αυτό το αναγνωριστικό!

Εάν προτιμάτε, μπορείτε να καθορίσετε ένα προσαρμοσμένο αναγνωριστικό εντός του χαρακτηριστικού 'i18n'. Εάν το κάνετε αυτό, το αναγνωριστικό θα παραμείνει το ίδιο ακόμη και αν το κείμενο αλλάζει, οπότε πρέπει να είστε σίγουροι ότι δεν έχετε οποιεσδήποτε συγκέντρωση ταυτότητας σε όλη την εφαρμογή σας. Χρησιμοποιήστε το πρόθεμα '@@' για να ορίσετε ένα προσαρμοσμένο αναγνωριστικό. Εδώ το αναγνωριστικό θα γίνει «τίτλος»:

 & lt; div class = "meta__title" i18n = "@@ τίτλος" & gt;
     Τρέχουσα τιμή
   & lt; / div & gt; 

12. Προσθέστε κάποιο πλαίσιο

Για να διασφαλιστεί ότι ο μεταφραστής είναι σε θέση να παράσχει μια ακριβή μετάφραση, θα πρέπει συχνά να γνωρίζουν το πλαίσιο ότι το κείμενο χρησιμοποιείται μέσα. Το χαρακτηριστικό "i18n" μας επιτρέπει να ορίσετε μια περιγραφή και ένα νόημα για να βοηθήσουμε τον μεταφραστή. Η μορφή έχει ως εξής:

 & LT; DIV I18N = "Σημασία | Περιγραφή @@
Customid "& gt; text & lt; / div & gt; 

Ας ενημερώσουμε τον τίτλο μας με ένα νόημα και περιγραφή:

 & lt; div class = "meta__title" i18n = "κάρτα
Τίτλος | Αξία αυτή τη στιγμή στο χρόνο @@ Τίτλος "& GT;
     Τρέχουσα τιμή
   & lt; / div & gt; 

Αυτό θα πρέπει να δώσει στον μεταφραστή επαρκές πλαίσιο για να δώσει μια ακριβή μετάφραση. Αναζωογονείστε το αρχείο μετάφρασης και θα πρέπει να δείτε αυτές τις τιμές έχουν εξάγει. Αξίζει να σημειωθεί ότι αν δεν χρησιμοποιήσετε ένα προσαρμοσμένο αναγνωριστικό το παραγόμενο αναγνωριστικό παίρνει το νόημα και το κείμενο σε λογαριασμό. Έτσι το ίδιο κείμενο, αλλά με διαφορετικό νόημα, θα πάρει ένα διαφορετικό αναγνωριστικό. Η περιγραφή, ωστόσο, δεν έχει καμία επίδραση στο αναγνωριστικό.

13. Κείμενο με μεταβλητές

Ας προχωρήσουμε στην ενότητα Intro. Η πρώτη παράγραφος περιέχει κείμενο και μεταβλητή που θα παρεμβάλλεται κατά το χρόνο εκτέλεσης. Πώς το χειρίζεστε αυτό;

Καλά ευτυχώς είναι αρκετά απλή. Και πάλι πρέπει να προσθέσουμε ένα ουσιαστικό χαρακτηριστικό "i18n" στο στοιχείο που περιέχει. Προσθέστε το απευθείας στο στοιχείο παραγράφου:

 & lt; p i18n = "τιμή κλεισίματος | τιμή όταν η αγορά
κλειστή χθες @@ closingvalue "& gt;
Εκτελέστε ξανά το εργαλείο εξαγωγής και θα δείτε αυτή τη νέα μονάδα μετάφρασης:
  & lt; trans-μονάδας id = "closingvalue"
datatype = "html" & gt;
    & lt; πηγή & gt; χθες & amp;
& lt; x id = "interpolation" equiv-text = "{{
ΚλείσιμοValue | Νόμισμα: & Amp; Apos; GBP & AMP; APO;
}} "/ & gt;. & lt; / source & gt; 

Δείτε τον τρόπο με τον οποίο η μεταβλητή παρεμβολή έχει αναλυθεί στην έξοδο. Το ωραίο πράγμα για αυτό είναι ότι επιτρέπει στον μεταφραστή να τροποποιήσει τη γραμματική δομή της πρότασης, εάν είναι απαραίτητο, χωρίς να σπάσει τη δέσμευση. Για παράδειγμα, μπορεί να υπάρχει μια γλώσσα όπου η φράση θα γράψει καλύτερα: Η τιμή X ήταν χθες το κλείσιμο, δηλαδή με τη μεταβλητή κατά την έναρξη.

14. ΠΛΑΙΣΙΟ

Προχωρώντας στην επόμενη παράγραφο, θα δείτε κάποια εκφοβιστική σύνταξη. Αυτό ονομάζεται μορφή μηνύματος ICU και σας επιτρέπει να καθορίσετε διαφορετικά κομμάτια κειμένου με βάση την τιμή μιας μεταβλητής.

Μπορείτε να το χρησιμοποιήσετε για να προσθέσετε τις λέξεις "S" στα αγγλικά όταν η τιμή είναι μηδέν ή όχι μία. Για παράδειγμα, εάν 'δευτερόλεπτα' είναι μια μεταβλητή που περιέχει τον αριθμό των δευτερολέπτων που μπορούμε να χρησιμοποιήσουμε αυτή την έκφραση πολλαπλασιασμού ICU:

 {{δευτερόλεπτα}} {δευτερόλεπτα, πληθυντικός, ένας
{δεύτερη}, άλλα {δευτερόλεπτα}} 

Που θα εξάγει:

• 0 δευτερόλεπτα
• 1 δευτερόλεπτο
• 2 δευτερόλεπτα

Δεν φαίνεται να τεκμηριωθεί, αλλά μπορείτε επίσης να χρησιμοποιήσετε το "Asyncpipe" μέσα στη σύνταξη προγραμματισμού για να εργαστείτε με τα παρατηρήσιμα.

Σε αυτό το παράδειγμα 'ένα' και 'άλλες' είναι κατηγορίες πλουραλών. Υπάρχουν πολλές κατηγορίες για να διαλέξετε, αλλά προσέξτε! Δεν υποστηρίζουν όλες τις τοποθεσίες όλες τις κατηγορίες και η γωνιακή δεν σας λέει αν προσπαθήσετε να χρησιμοποιήσετε μια κατηγορία που δεν υποστηρίζεται από την τρέχουσα τοπική βάση. Είναι εύκολο να καταλήξετε να σκέφτεστε ότι έχετε κάνει κάτι λάθος επειδή η κατηγορία "δύο" δεν εργάζεται στην τοπική σας τοποθέτηση "En-GB" και αντ 'αυτού βλέπετε το κείμενο "άλλων". Ανενεργά «EL» (και πολλές άλλες κοινές γλώσσες) υποστηρίζουν μόνο το «ένα» και «άλλο», παρόλο που το «μηδέν» και «δύο» είναι ρητές αξίες.

Ελέγξτε αυτό το αρχείο για να δείτε τι υποστηρίζεται πραγματικά.

15. Τα πολλαπλά γραφήματα ακτινικής ράβδου

Μπορούμε να εργαστούμε γύρω από αυτόν τον περιορισμό χρησιμοποιώντας αριθμούς αντί για κατηγορίες. Απλά πρόθεμα την αξία με ένα '=':

 εκεί {παρατηρητές, πληθυντικός, = 0 {δεν είναι κανείς} = 1
{είναι ένα άτομο} = 2 {είναι δύο άτομα}
    άλλοι {είναι {{watchers}} άνθρωποι}}}
παρακολουθώντας τώρα. 

Αυτό έχει ήδη συσταθεί στην εφαρμογή επίδειξης, πρέπει απλώς να προσθέσουμε το χαρακτηριστικό «I18N» στην παράγραφο που περιέχει:

 & lt; p i18n = "watchers | αριθμός ανθρώπων
βλέποντας τους value @@ Watchers "& GT; 

Εκτελέστε ξανά το εργαλείο εξαγωγής για να δείτε πώς φαίνεται αυτό. Θα δείτε ότι αυτό εξάγετε ελαφρώς διαφορετικά. Θα δημιουργήσει δύο μονάδες μετάφρασης. ένα για την ίδια την έκφραση της ICU και ένα που παρεμβαίνει αυτή την έκφραση στην αρχική συμβολοσειρά.

16. Επιλέξτε έκφραση

Εάν θέλετε να εμφανίσετε διαφορετικό κείμενο, ανάλογα με την τιμή μιας μεταβλητής, μπορείτε να χρησιμοποιήσετε μια έκφραση 'Select' Select 'ICU, η οποία είναι πολύ παρόμοια με τη σύνταξη «πληθυντικού» που αποδεικνύεται παραπάνω. Στην εφαρμογή επίδειξης παρακολουθούμε την αλλαγή που εφαρμόζεται στην αξία και δημιουργούμε μια παρατηρήσιμη ροή που ονομάζεται «τάση $» η οποία εξάγει «επάνω», «κάτω» ή «σταθερό» ανάλογα με το αν η αλλαγή είναι θετική, αρνητική ή μηδενική.

Στη συνέχεια συνδέουμε την έκφραση της «επιλογής» της ICU για την έξοδο μιας διαφορετικής συμβολοσειράς ανάλογα με την τιμή ροής. Εδώ μπορείτε να δείτε το "Asyncpipe" που χρησιμοποιείται:

 Η αξία {trend $ | Async, επιλέξτε, επάνω
{Αυξημένη} Κάτω {Μειωμένη} σταθερή
    {δεν άλλαξε}} 

Αυτή είναι μια κάπως καθαρότερη σύνταξη από τη χρήση του 'Ngif' ή 'ngswitch' για να χειριστείτε το DOM, καθώς και παίζει επίσης όμορφα με το εργαλείο εξαγωγής. Προσθέστε το χαρακτηριστικό 'I18N' στο στοιχείο που περιέχει:

 & lt; div class = "card__info" i18n = "τιμή
Η τάση περιγράφει την τάση αλλαγής αξίας @@ trend "& gt; 

Αναζωογονεί το αρχείο μεταφράσεων και θα δείτε ότι η προσέγγιση είναι παρόμοια με την έξοδο του πληθυντικού, με δύο μονάδες μετάφρασης που δημιουργήθηκαν. Οι εκφράσεις της ICU είναι αρκετά εύχρηστες μόλις τα συνηθίσετε, καθώς μπορείτε να τα φωλιάσετε για να δημιουργήσετε πιο σύνθετες εξόδους.

17. Προσθήκη μεταφράσεων

Ένα ακόμα χαρακτηριστικό "i18n" για να προσθέσετε:

 & lt; div class = "card__info" i18n = "συναλλαγές
Count | Αριθμός συναλλαγών σήμερα @@
Συναλλαγές "& GT;
     Συναλλαγές: {{συναλλαγές $ | async |
αριθμός }}
   & lt; / div & gt; 

Τώρα έχουμε επισημάνει όλο το κείμενο που χρειάζεται μετάφραση, μπορούμε να δημιουργήσουμε το αρχείο μετάφρασης μία τελευταία φορά. Μόλις δημιουργηθεί μετονομάστε το σε 'μηνύματα.ar-IQ.XLF' και αντικαταστήστε την προηγούμενη ενσάρκωση. Αυτό είναι το αρχείο που θα στέλνουμε στον επαγγελματία μετάφρασης, αλλά για τους σκοπούς αυτού του εκπαιδευτικού, το Google Translate θα στέκεται μέσα!

Ανοίξτε το αρχείο XLF και διπλότυπα κάθε πηγή & gt; στοιχείο, μετονομασία του '& lt; ".'. Δυστυχώς, μπορεί να είναι αρκετά ακατάλληλο, ώστε να μπορέσει να βοηθήσει στην ομορφιά του περιεχομένου.

Για να ελέγξετε ότι τα έχουμε όλα, αποθηκεύστε το αρχείο και ξεκινήστε την εφαρμογή με την αραβική τοπική βάση:

 $ NG SERVE --Configuration = AR-IQ 

Εάν βλέπετε μηνύματα στο τερματικό όπως αυτό που σημαίνει ότι έχετε χάσει ένα:

 Σφάλμα σε σφάλματα επίλυσης Xliff: Μήνυμα * ID *
χάνει μια μετάφραση ("

Ας ελπίσουμε ότι δεν θα έχετε σφάλματα και θα είστε σε θέση να δείτε την εφαρμογή στο πρόγραμμα περιήγησης. Δεν έχουμε προσθέσει ακόμα πραγματικά αραβικά, ώστε να μην φαίνεται πολύ διαφορετική.

18. Μετάφραση Google

Ας ξεκινήσουμε με κάτι εύκολο - τον τίτλο «τρέχουσας αξίας». Το Google Translate μου λέει ότι θα έπρεπε να είναι (αραβικό κείμενο εδώ), ενημερώστε έτσι την αξία στο Target & GT; στοιχείο:

 & lt; πηγή & gt; τρέχουσα τιμή & lt; / source & gt;
       & lt · target & gt · αραβικό κείμενο εδώ & lt; / target & gt; 

Μέχρι εδώ καλά. Τώρα ας κάνουμε ένα με παρεμβολή. Εδώ είναι "Η τιμή κλεισίματος χθες ήταν ..." (ελπίζουμε!):

 & lt; Target & GT, αραβικό κείμενο εδώ & lt; x
ID = "Interpolation" Equiv-Text = "{{ClosingValue
| Νόμισμα: & Amp; Apos; GBP & AMP; APO; }} "/> ;.< ;/target> ,

Χρησιμοποιήστε έναν αριθμό όταν μεταφράζετε, ώστε να μπορείτε να δείτε πού πρέπει να είναι η παρεμβολή. Παρατηρήστε ότι όταν βλέπετε το μεταφρασμένο αποτέλεσμα στο Google Translate, θα εμφανιστεί αντίστροφη - δηλαδή τον αριθμό στην αρχή - αλλά όταν αντιγράψετε και επικολλήστε το στο αρχείο μετάφρασης θα επιστρέψει στην αρχική σειρά. Αυτό συμβαίνει επειδή η αραβική είναι μια γλώσσα RTL έτσι ώστε το σενάριο να είναι (σχεδόν) εξ ολοκλήρου αντικατοπτρίζεται. Το Google Translate κάνει αυτό προσθέτοντας ένα χαρακτηριστικό "dir =" RTL "στο στοιχείο που περιέχει. Θα μάθουμε πώς να το κάνουμε αυτό στο επόμενο βήμα. Οι υπόλοιπες μεταφράσεις είναι διαθέσιμες στο Demo Repo, το υποκατάστημα "Tutorial".

19. Κατεύθυνση Script

Πρέπει να διαχειριστούμε την κατεύθυνση του σεναρίου στην εφαρμογή μας, επειδή η γωνιακή δεν θα το κάνει αυτόματα για εμάς. Επίσης, δεν φαίνεται να υπάρχει τρόπος ανίχνευσης εάν η τρέχουσα τοπική γλώσσα είναι μια γλώσσα LTR ή RTL, οπότε θα χρειαστεί να το σκληρύνετε. Θα ήταν υπέροχο αν η γωνιακή προσέφερε ενσωματωμένη οδηγία για αυτό.

Ανοίξτε το 'App.comPonent.ts'. Εισαγωγή 'Εισαγωγή', 'Locale_ID' και 'HostBinding' από '' @ γωνιακό / πυρήνα ''. Στη συνέχεια, δημιουργήστε το 'HostBinding' ως εξής. Αυτό θα προσθέσει ένα χαρακτηριστικό "dir" στον App Complponent και θα ορίσει την προεπιλεγμένη κατεύθυνση γλώσσας στο 'LTR':

 @hostbinding ('attr.dir') dir = 'ltr'; 

Επόμενο Προσθέστε έναν κατασκευαστή και έγχυση του 'Locale_ID'. Θυμηθείτε ότι αυτό ρυθμίζεται από τη διαμόρφωσή μας, επειδή χρησιμοποιούμε Aot.

 Κατασκευαστής (@inject (locale_id) Ιδιωτική τοποθεσία: String) {} 

Και τελικά προσθέστε το ακόλουθο απόσπασμα στην υπάρχουσα μέθοδο "ngoninit". Εδώ ελέγχουμε αν το 'Locale_ID', δηλαδή «AR-IQ», ξεκινάει με το «AR» και αν αλλάξει την κατεύθυνση στο 'RTL' αντ 'αυτού.

 αν (αυτό.locale.startswith ('AR')) {
     αυτό.dir = 'RTL';
} 

Εάν σκοπεύετε να υποστηρίξετε περισσότερες τοποθεσίες τότε ίσως χρειαστεί να αναγνωρίσετε αυτό για να το καταστήσετε πιο κλιμακωτό, ωστόσο, καθώς υπάρχουν μόνο περίπου δέκα γλώσσες RTL κατά τη χρήση σήμερα αυτή η προσέγγιση δεν πρέπει να είναι πολύ δύσκολη. Ξεκινήστε την εφαρμογή Αραβικά και θα πρέπει τώρα να δείτε ότι το UI αντικατοπτρίζεται - το σημάδι £ πρέπει να είναι στα δεξιά.

20. Παραγωγή

Το τελευταίο βήμα είναι να δημιουργήσετε και να ελέγξετε τις κατασκευές παραγωγής μας. Πρώτον, όμως, πρέπει να κάνουμε μια άλλη γρήγορη τροποποίηση στη διαμόρφωση "angular.json".

Στην «Αρχιτεκτονική». Μεγέθυνση του υφιστάμενου αντικειμένου παραγωγής και μετονομάστε την «παραγωγή-AR-IQ». Στη συνέχεια, αντιγράψτε και επικολλήστε τις ιδιότητες από την υπάρχουσα διαμόρφωση "" AR-IQ "στο αντικείμενο, οπότε έχετε και τις δύο επιλογές παραγωγής και τις επιλογές" i18n ".

Πρέπει επίσης να ενημερώσετε το "Architect.Serve.configurations". Αυτή τη φορά διπλασιάστε το υπάρχον αντικείμενο "AR-IQ" και μετονομάστε το "παραγωγής-AR-IQ" και αλλάξτε την τιμή "Browsertarget" για να επισημάνετε τη νέα σας διαμόρφωση "Παραγωγή-AR-IQ".

Τώρα μπορείτε να χτίσετε και να εξυπηρετήσετε την παραγωγή σας αραβικά τοπικά με αυτήν την εντολή:

 $ ng σερβίρει - αντιδράσεις = παραγωγή-AR-IQ 

Εντάξει, έχουμε τελειώσει! Έχουμε διεθνώς διεθνώς διεθνώς την εφαρμογή μας και την εντοπίσουμε για τα ακροατήρια «EN-GB» και «AR-IQ». Το γωνιακό κάνει τη διαδικασία εξαιρετικά απλή για τον προγραμματιστή, στην πραγματικότητα, το πιο δύσκολο κομμάτι υπολογίζει τι πρέπει να είναι οι μεταφράσεις - συγνώμη σε οποιαδήποτε αραβικά ηχεία αν κάτι είναι λάθος!

Το άρθρο αυτό δημοσιεύθηκε αρχικά σε εξέταση 281 του δημιουργικού σχεδιασμού Web Magazine Web Design. Αγοράστε τεύχος 281 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

• Πώς να οικοδομήσουμε μια ιστοσελίδα πλήρους σελίδας στο γωνιακό
• Οι καλύτεροι φορητοί υπολογιστές για τον προγραμματισμό το 2019
• Πώς να οικοδομήσουμε μια εφαρμογή