Kuidas jagada i18n-fail iga laisa mooduliga mooduli kohta ngx-translatega?

tl; dr Kontrollige kokkuvõtvat jaotist lõpus

Pärast mõnekuist töötamist minu nurgarakendusega on minu i18n-failides kummaski üle 800 rea, neid on peaaegu võimatu hooldada ja need muutuvad aja jooksul järjest raskemaks. Parim lahendus sellele probleemile oleks üks moodul i18n (tegelikult 2, ma pean toetama prantsuse ja inglise keelt).

Keskkond:

@ nurk / südamik @ 4.4.3
@ ngx-translate / tuum @ 8.0.0
@ ngx-translate / http-laadur @ 2.0.0

Põhimõte

Jsoni faili ja laisalt laaditud mooduli laadimiseks peate kasutama omaduste isolaati, nagu soovitab dokumentatsioon. Tõlkemoduuli isoleerimine võimaldab teil luua uue TranslateService eksemplari ja koos sellega ka uue HttpLoader-eksemplari, mille tee on i18n-failide jaoks erinev.

Suurim erinevus, mida peate meeles pidama, on see, et kui keelt muudate, peate selle muutma ka kõigis TranslateService'i eksemplarides. See ütleb teenusele, et see tõmbaks soovitud keele jaoks iga laisalt laaditud mooduli json-faili.

Oma koodis kasutan Reduxi (ngrx-platvormi), et suhelda kõigi oma moodulite vahel keelevahetusega.

Mitu taotlust?

Märkus. Peate seda meeles pidama: see suurendab teie serverile tehtud päringute arvu märkimisväärselt! kui teil on 10 moodulit, on see 10 ainult tõlketaotlust!

Kuid 2017. aastal pole see enam probleem ...

  • Kasutage Http 2
  • Manifaili genereerimiseks kasutage Google'i sw-precache'i
  • Laiska laadimisstrateegiana kasutage jõude eellaadimist
  • Kasutage serveripoolset renderdamist, kui te pole endiselt rahul

Mõju teie jõudlusele peaks olema tühine.

Kausta ülesehitus

Minu varade kaust i18n-failide jaoks näeb välja järgmine:

varad /
18 i18n /
   ├── rakendus /
   │ ├── en.json
   │ └── fr.json
   └── kodu /
       ├── en.json
       └── fr.json

Rakendus sisaldab i18n-i põhitõlkeid, nagu näiteks: menüü, päised, jalus ja muud kaustad, näiteks kodu, mis sisaldavad i18n-i tõlkeid laiskloetud mooduli jaoks.

Kood

AppModule

Esmalt valmistage oma AppModule ette, et helistada rakendusele TranslateModule forRoot () ja laadida oma i18n põhifailid app / (en | fr) .json

AppComponent

AppComponent on teie juurkomponent, kus kasutaja saab keelt seadistada, klõpsates päises asuvat nuppu. Seejärel saadate keeleteabe oma poodi, et anda teistele moodulitele teada, et keel on muutunud ja nemad peavad oma TranslateService eksemplari keelt muutma.

Kodumoodul (laisalt laaditud moodul)

Kuulutage selles moodulis uus TranslateHttpLoader eksemplar, et i18n-failid saaksite koju / (en | fr) .json

Kodukomponent

Ainus, mis jääb, on kutsuda selle TranslateService eksemplari kasutamine () iga kord, kui keel muutub, kõigis teie laisalt laaditud moodulite komponentides, tellides teie poe praeguse keele atribuudi.

Kokkuvõte

See selleks! Olete nüüd seadistanud jagama suure i18n-faili väiksemaks, mis aitab teil tõlkefaili hõlpsalt hooldada.

Kokku võtma:

  1. Teie AppModule'i kutses forRoot ()
  2. Kõigis oma laisalt laaditud moodulites kutsuge forChild () isoleeritud: true abil ja looge uus TranslateHttpLoader eksemplar koos mooduli i18n-failide teega
  3. Kõigil teie laisa mooduliga mooduli põhikomponentide kõnekomponentide kasutamisel () kasutab TranslateService () iga kord, kui kasutaja keelt muudab