Kotne in spletne komponente, kotni elementi, kotni elementi

O tem

V tej temi želim deliti rezultate raziskav o Angular 5 in spletnih komponentah. Videli bomo, kako lahko v Angular 5 ustvarjamo in uporabljamo spletne komponente in kakšne koristi lahko dobimo.

Kotni elementi

Uradno Angular še ne podpira spletnih komponent, vendar obstaja podružnica v kotnem skladišču in ko sem ga videl, se je odločil, da se igra z njim in vidim, kako bo delovalo. Kotna ekipa je ta paket poimenovala "@ kotni / elementi". Rezultati raziskovanja so bili res impresivni, toliko, da sem se odločil napisati temo in jo deliti z vami (nisem bloger in ne pišem preveč, vendar je bila ta raziskava izjemna!).

Kako ustvariti spletne komponente

Recimo, da želimo ustvariti standardne spletne komponente s pomočjo Angularja, preveč preprosto je. Dovolite mi, da pokažem, kako:

Prvi korak je ustvarjanje novega projekta z uporabo kotnih sponk:

`ni novih spletnih komponent-vzorec`

Naslednji korak je, da dodate standardno kotno komponento in jo pokličemo kot "gumb":

`ng g komponenta like-button`

Pred tem smo to počeli vsak dan, zdaj moramo to novo komponento nekako registrirati in izvoziti kot spletno komponento, da bi dosegli to, bomo morali narediti štiri preproste korake:

  1. kopirajte @ angical / elemente razredov iz kotnega skladišča v našem projektu, to moramo storiti ročno, ker ta paket še ni izdan
  2. namestite @ webcomponents / custom-elements in ga uvozite v polyfills: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. spremenite app.module.ts, dodajte vse naše komponente v entryComponents, ki jih želimo postati spletne komponente, prav tako bomo morali spremeniti konfiguracijo zagonskega strežnika, kot je ta: https://github.com/playerx/angular-elements-sample/blob/ master / src / app / app.module.ts
  4. spremenite main.ts, kot je ta: „https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts“

To je to, naše standardne kotne komponente so postale spletne komponente.

Primer dela si lahko ogledate na:

https://angular-elements-sample.now.sh

(izvorna koda: https://github.com/playerx/angular-elements-sample)

Kaj se je zgodilo tukaj:

  • Namesto da izvozimo in uporabimo eno komponento root-aplikacije, lahko zdaj v naši datoteki index.html ali kje drugje uporabljamo več spletnih komponent
  • Naše standardne komponente so lahko spletne komponente, tako da jih preprosto registrirate v vnosnih komponentah

Ko sem prvič ugotovil, da se mi zdi tako preprosto? ja, enostavno graška :) ampak to je šele začetek raziskav!

Preden preidemo na naslednji del, si oglejmo, katere datoteke se generirajo:

  • inline.bundle.js - to je majhen skript spletnega paketa za nalaganje modulov
  • vendor.bundle.js - kotne knjižnice in knjižnice tretjih strank
  • polyfills.bundle.js - polifills
  • main.bundle.js - naše komponente
  • styles.bundle.css - na primer globalni slogi, slogi materiala

Kako uporabljati spletne komponente

Ustvarili smo spletno komponento, imenovano `app-like-button`, zdaj pa jo uporabljajmo v drugem popolnoma drugem projektu. Ustvarimo še en kotni projekt in naredimo naslednje korake:

  1. namestite @ webcomponents / custom-elements in ga uvozite v polyfills: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. omogočite sheme po meri v app.module.ts: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. začnite uporabljati našo novo spletno komponento, kot je ta:
     Tu bo naložena komponenta
  4. Naložite skripte spletnih komponent - o tem delu lahko podrobno razpravljate

Naložite skripte spletnih komponent

moramo naložiti naslednje skripte iz našega prvega projekta:

  • inline.bundle.js - ta bo ustvaril "izoliran obseg" knjižnic, ki jih potrebujemo za spletne komponente
  • vendor.bundle.js - kotne knjižnice in knjižnice tretjih oseb, ki smo jih uporabili za spletne komponente
  • main.bundle.js - komponente same

ne nalagamo polyfills.bundle.js in styles.bundle.css in malo kasneje o tem.

Takoj, ko bodo ti skripti naloženi in vstavljeni v naš html, bo komponenta v obliki gumba oživela, "komponenta bo naložena tukaj" bo besedilo nadomeščeno s samo komponento. za demonstracijo sem ustvaril preprosto orodje za nalaganje skriptov: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

Celoten primer dela si lahko ogledate na:

https://angular-webcomponents-usage-sample.now.sh/

(izvorna koda: https://github.com/playerx/angular-webcomponents-usage-sample)

Zdaj pa se pogovorimo o tem, kakšne dodatne prednosti lahko dobimo s kombiniranjem kotnih in spletnih komponent

Usmerjanje

Mene je zanimala uporaba močnih kotnih poti znotraj moje spletne komponente. Obstajala je ena težava: nisem želel uporabljati standardne usmerjenosti, ker spreminja URL in ne želim, da moja spletna komponenta spremeni URL, bo veliko težko upravljati globalno usmerjanje na ta način.

Potrebujem nekaj, kar bo informacije o usmerjanju shranilo v pomnilnik in to je MockLocationStrategy, ta je za testiranje, vendar natančno ustreza mojim potrebam. V demo projektih lahko vidite spletno komponento z usmerjanjem - "app-module-shell".

Mislim, da če morate med spreminjanjem spletnih komponent spremeniti URL, ustvarite dogodek in v glavni aplikaciji upravljajte usmerjanje URL-jev.

Senčni dom

V teh primerih nisem ustvaril enkapsulacije izvornega pogleda, razlog je preprost, knjižnica materialov ga trenutno ne podpira (https://github.com/angular/material2/isissue/3386), vendar lahko ustvarite komponente s senco dom, sem poskusil in deluje odlično

Snemanje

Tu je moja najljubša, če se spomnite, da v novi aplikaciji nismo naložili styles.bundle.css. Razlog je preprost, nismo želeli teme spletne komponente, ker imamo svojo. In ja, lahko ustvarite spletne komponente z materialno zasnovo z neko temo in jih uporabite v drugi aplikaciji, pri čemer bo uporabljena tema aplikacije, oglejte ta primer:

ustvarjanje spletnih komponent - https://angular-elements-sample.now.sh

z njihovo uporabo v drugi aplikaciji - https://angular-webcomponents-usage-sample.now.sh

po kliku »Naloži modul« poglejte lupino modula aplikacije.

Znane težave

  • Če boste spletno komponento uporabljali v drugi spletni komponenti v isti aplikaciji, kjer so deklarirane spletne komponente, bodo prikazane dvakrat. Razlog je preprost kotni postane sestavni del in tudi njegova spletna komponenta. To je znano vprašanje kotne ekipe in mislim, da bo kmalu rešitev. Zaenkrat lahko predlagam naslednje:
     Recimo, da imamo modul za stranke in želimo deliti nekatere komponente z drugimi moduli, rešiti bomo ustvariti dva modula:
    1. stranke-spletne komponente - ki bodo gostile vse spletne komponente
    2. kupci-lupina - ki jih bodo uporabljali
    3. še en modul - ki bo uporabljal tudi spletne komponente za stranke

Povzemite

Poskušal sem pokazati, kako lahko ustvarite in uporabljate moč spletnih komponent in kotnih skupaj. Obstaja veliko več scenarijev primerov, ki jih je mogoče zajeti z mešanjem teh dveh neverjetnih stvari, zajel sem le nekaj njih.

Na koncu si oglejte video, bila je prva iskrica moje raziskave.

Tu so tudi primeri dela:

Ustvarjanje spletnih komponent - https://github.com/playerx/angular-elements-sample

Uporaba spletnih komponent - https://github.com/playerx/angular-webcomponents-usage-sample

Hvala za branje :)