Kuinka jakaa i18n-tiedostosi per laiska ladattu moduuli ngx-kääntää?

tl; dr Tarkista yhteenveto-osa lopusta

Muutaman kuukauden kuluttua työskentelystäni Angular-sovelluksessani, i18n-tiedostoillani on yli 800 riviä jokaista, melkein mahdotonta ylläpitää, ja niistä tulee yhä vaikeampia ajan myötä. Paras ratkaisu tähän ongelmaan olisi yksi i18n-tiedosto moduulia kohti (itse asiassa 2, minun on tuettava ranskaa ja englantia).

ympäristö:

@ Kulma / ydin @ 4.4.3
@ NGX-kääntää / core @ 8.0.0
@ NGX-kääntää / http-loader @ 2.0.0

Periaate

Json-tiedoston lataamiseen laiskasti ladatun moduulin kanssa sinun on käytettävä ominaisuuseristettä, kuten asiakirjat viittaavat. TranslateModule -sovelluksen eristäminen antaa sinun luoda uuden TranslateService-esiintymän ja sen mukana uuden HttpLoader-esiintymän, jolla on eri polku i18n-tiedostoihin.

Nyt suurin ero, joka sinun on pidettävä mielessä, on se, että kun vaihdat kieltä, se on vaihdettava kaikkiin TranslateService-instansseihin. Tämä käskee palvelun hakemaan kunkin laiskaan ladatun moduulin json-tiedoston haluamallesi kielelle.

Koodissani käytän Reduxia (ngrx-alusta) kommunikoidakseni kielimuutosta kaikkien moduulien välillä.

Useita pyyntöjä?

Huomaa: Sinun on pidettävä tämä mielessä: tämä lisää huomattavasti palvelimellesi tehtyjen pyyntöjen määrää! jos sinulla on 10 moduulia, se tarkoittaa 10 käännöspyyntöä!

Mutta vuonna 2017 se ei ole enää ongelma ...

  • Käytä Http 2
  • Luo manifestitiedosto Googlen sw-esisivulla
  • Käytä Idle-Preload laiskaa lastausstrategiaa
  • Käytä palvelinpuolen renderointia, jos et silti ole tyytyväinen

Vaikutus suorituskykyyn pitäisi olla merkityksetön.

Kansiorakenne

I18n-tiedostojen omaisuuskansioni näyttää tältä:

varat /
└── i18n /
   ├── sovellus /
   │ ├── en.json
   │ └── fr.json
   └── koti /
       ├── en.json
       └── fr.json

Sovellus sisältää y18 i18n-käännökset, kuten: valikko, otsikko, alatunniste ja muut kansiot, kuten koti, jotka sisältävät i18n-käännökset laiskaan ladattuun moduuliin.

Koodi

AppModule

Valmistele ensin AppModule soittamaan TranslateModule-sovelluksen forRoot () ja lataamaan y18 i-yd-tiedostosi app / (en | fr) .json

AppComponent

AppComponent on juurikomponentti, jossa käyttäjä voi asettaa kielen napsauttamalla otsikon painiketta. Sitten lähetät kielitiedot myymälääsi ilmoittamaan muille moduuleillesi, että kieli on muuttunut, ja heidän on vaihdettava TranslateService-ilmentymän kieli.

HomeModule (laiska ladattu moduuli)

Ilmoita tässä moduulissa uusi TranslateHttpLoader-ilmentymä, jotta i18n-tiedostosi saadaan kotiin / (fi | fr) .json

HomeComponent

Ainoa asia, joka on soittaa sen TranslateService-ilmentymän käyttöön (), joka kerta kun kieli muuttuu, kaikissa laiskasti ladattujen moduulien komponenteissa tilaamalla myymälän nykyinen kieliomaisuus.

Yhteenveto

Se siitä! Olet nyt valmis jakamaan iso i18n-tiedostosi pienemmäksi, mikä auttaa sinua ylläpitämään käännöstiedostoasi helposti.

Yhteenvetona:

  1. AppModule-kutsussa forRoot ()
  2. Soita kaikissa laiskaan ladattuihin moduuleihisi forChild () with isolated: true ja luo uusi TranslateHttpLoader-ilmentymä, jolla on polku moduulin i18n-tiedostoihin.
  3. Kaikissa laiskaan ladatun moduulin pääkomponenttipuheluissa () TranslateService-palvelussa () joka kerta, kun käyttäjä vaihtaa kieltä