Kampiniai ir tinklo komponentai, a.k.a kampiniai elementai

Apie

Šia tema noriu pasidalinti tyrimų, atliktų apie „Angular 5“ ir interneto komponentus, rezultatais. Pamatysime, kaip galime sukurti ir naudoti „5 kampo“ interneto komponentus ir kokią naudą galime gauti.

Kampiniai elementai

Oficialiai „Angular“ dar nepalaiko internetinių komponentų, tačiau kampinėje saugykloje yra atšaka ir, kai pamačiau, kad nusprendžiau su ja žaisti ir pamatyti, kaip ji veiks. Kampinė komanda šį paketą pavadino „@ anglic / elements“. Tyrimų rezultatai buvo išties įspūdingi tiek, kad nusprendžiau parašyti temą ir pasidalinti ja su jumis (nesu tinklaraštininkė ir per daug nerašau, bet šis tyrimas buvo išskirtinis!).

Kaip sukurti interneto komponentus

Tarkime, kad norime sukurti standartinius žiniatinklio komponentus naudodami kampinį. Tai per paprasta :) leiskite man parodyti, kaip:

Pirmasis žingsnis yra sukurti naują projektą naudojant kampinį klijų:

„naujų interneto komponentų pavyzdžių“

Kitas žingsnis yra pridėti standartinį kampinį komponentą ir leisti jį vadinti „patinka mygtuku“:

„komponentas, panašus į mygtuką“

Anksčiau tai buvo įprasta, ką mes darome kiekvieną dieną, dabar turime kažkaip užregistruoti ir eksportuoti šį naują komponentą kaip žiniatinklio komponentą. Norėdami tai pasiekti, turėsime atlikti keturis paprastus veiksmus:

  1. nukopijuokite @ kampinių / elementų klases iš mūsų projekto kampinės saugyklos, tai turime padaryti rankiniu būdu, nes šis paketas dar neišleistas
  2. įdiekite @ webkomponentus / pasirinktinius elementus ir importuokite jį į daugialypius užpildus: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. pakeiskite app.module.ts, įtraukite visus savo komponentus į „entryComponents“, kuriuos norime paversti žiniatinklio komponentais, taip pat turėsime pakeisti įkrovos juostos konfigūraciją taip: https://github.com/playerx/angular-elements-sample/blob/ „master“ / src / app / app.module.ts
  4. pakeisti main.ts taip: „https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts“

Štai standartiniai kampiniai komponentai tapo žiniatinklio komponentais.

Darbinį pavyzdį galite pamatyti apsilankę:

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

(šaltinio kodas: https://github.com/playerx/angular-elements-sample)

Taigi, kas čia nutiko:

  • Užuot eksportavę ir naudodami vieną programos „root“ komponentą, dabar indekso faile ar kai kur kitur galime turėti ir naudoti kelis žiniatinklio komponentus
  • Mūsų standartiniai komponentai gali būti internetiniai komponentai, tiesiog juos įregistravus „entryComponents“

Kai pirmą kartą sužinojau, kad manau, kad taip paprasta? taip, lengva žirnelė :), bet tai tik tyrimų pradžia!

Prieš pereidami prie kitos dalies, pažiūrėkime, kokie failai yra sugeneruoti:

  • inline.bundle.js - tai mažas „Webpack“ scenarijus, skirtas moduliams įkelti
  • vendor.bundle.js - kampinės bibliotekos ir trečiųjų šalių bibliotekos
  • polyfills.bundle.js - polyfills
  • main.bundle.js - mūsų komponentai
  • stiliai.bundle.css - globalūs stiliai, pavyzdžiui, materialūs stiliai

Kaip naudotis interneto komponentais

Mes sukūrėme žiniatinklio komponentą, vadinamą „į programą panašus mygtukas“, dabar naudokime jį kitame visiškai kitame projekte. Sukurkime kitą kampinį projektą ir atlikkime šiuos veiksmus:

  1. įdiekite @ webkomponentus / pasirinktinius elementus ir importuokite jį į daugialypius užpildus: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. įgalinti tinkintas schemas „app.module.ts“: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. pradėkite naudoti mūsų naują interneto komponentą, kaip šis:
     Čia bus įkeltas komponentas
  4. Įkelti žiniatinklio komponentų scenarijus - leidžia išsamiau aptarti šią dalį

Įkelkite žiniatinklio komponentų scenarijus

turime įkelti šiuos scenarijus iš savo pirmojo projekto:

  • inline.bundle.js - tai sukurs „izoliuotą apimtį“ bibliotekų, kurių mums reikia interneto komponentams
  • vendor.bundle.js - kampinės bibliotekos ir trečiųjų šalių bibliotekos, kurias naudojome žiniatinklio komponentams
  • main.bundle.js - patys komponentai

Mes neįkeliame polyfills.bundle.js ir stílus.bundle.css ir šiek tiek vėliau apie tai.

kai tik šie scenarijai bus įkelti ir įšvirkšti į mūsų HTML, į programą panašus mygtuko komponentas taps gyvas, tekstas „komponentas bus įkeltas čia“ bus pakeistas pačiu komponentu. demonstracinei versijai sukūriau paprastą scenarijų įkėlėją: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

Visą veikiantį pavyzdį galite patikrinti apsilankę:

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

(šaltinio kodas: https://github.com/playerx/angular-webcomponents-usage-sample)

Dabar aptarsime, kokią papildomą naudą galime gauti derindami kampinius ir žiniatinklio komponentus

Maršrutas

Vienas dalykas, kuris mane sudomino, yra galingo kampinio nukreipimo naudojimas mano interneto komponente. Iškilo viena problema, nenorėjau naudoti standartinio maršruto parinkimo, nes jis keičia URL, ir nenoriu, kad mano žiniatinklio komponentas pakeistų URL, bus daug sunku tokiu būdu valdyti visuotinį maršrutizavimą.

Man reikia kažko, kas išsaugotų maršruto informaciją atmintyje, ir tai yra „MockLocationStrategy“, šis yra skirtas bandymams, tačiau tiksliai atitinka mano poreikius. Demonstraciniuose projektuose galite pamatyti interneto komponentą su nukreipimu - „app-module-shell“.

Manau, jei reikia pakeisti URL, kol maršrutizuojamas interneto komponentas, turėtumėte sukurti įvykį ir tvarkyti URL nukreipimą pagrindinėje programoje.

Šešėlis Dom

Šiuose pavyzdžiuose nesu sukūręs vietinio vaizdo apjungimo, priežastis yra paprasta, medžiagų biblioteka to nepalaiko šiuo metu (https://github.com/angular/material2/issues/3386), tačiau galite laisvai kurti komponentus su šešėliniu dom, aš jį išbandžiau ir jis veikia puikiai

Theming

Čia yra mano mėgstamiausias, jei atsimenate, kad į naująją programą neįkėlėme stilių.bundle.css. Priežastis paprasta, nenorėjome žiniatinklio komponento temos, nes turime savo. Taip, jūs galite sukurti žiniatinklio komponentus, naudodami tam tikros temos medžiagą, ir naudoti ją kitoje programoje, o programos tema bus taikoma, patikrinkite šį pavyzdį:

interneto komponentų kūrimas - https://angular-elements-sample.now.sh

juos naudojant kitoje programoje - https://angular-webcomponents-usage-sample.now.sh

patikrinkite programos modulio apvalkalą spustelėję „Įkelti modulį“.

žinomos problemos

  • Jei naudosite žiniatinklio komponentą kitame žiniatinklio komponente toje pačioje programoje, kurioje skelbiami žiniatinklio komponentai, jie bus pateikiami du kartus. Priežastis paprasta. Kampinis atvaizduoja komponentą, taip pat jį pateikia kaip tinklo komponentą. Tai žinoma kampinei komandai ir manau, kad netrukus bus sprendimas. Kol kas kaip išeitį galiu pasiūlyti:
     Tarkime, kad turime klientų modulį ir norime bendrinti kai kuriuos komponentus su kitais moduliais, sprendimas bus sukurti du modulius:
    1. klientai - interneto komponentai - kuriuose bus visi interneto komponentai
    2. klientų apvalkalas - kas juos naudos
    3. kitas modulis - kuris taip pat naudos kliento žiniatinklio komponentus

Apibendrink

Bandžiau parodyti, kaip galite kurti ir naudoti interneto komponentų galią kartu su kampais. Yra daug daugiau atvejų scenarijų, kuriuos galima pritaikyti sumaišant tuos du nuostabius dalykus, aš aprašiau tik keletą iš jų.

Turėtumėte patikrinti vaizdo įrašą pabaigoje, tai buvo pirmoji mano tyrimų kibirkštis.

Čia taip pat yra darbo pavyzdžių:

Internetinių komponentų kūrimas - https://github.com/playerx/angular-elements-sample

Žiniatinklio komponentų naudojimas - https://github.com/playerx/angular-webcomponents-usage-sample

Ačiū už skaitymą :)