Nurga- ja veebikomponendid, nt nurgaelemendid

Umbes

Selles teemas soovin jagada uuringu tulemusi, mis mul on nurga 5 ja veebikomponentide kohta. Näeme, kuidas saame nurga 5 veebikomponente luua ja kasutada ning milliseid eeliseid me saame.

Nurgaelemendid

Ametlikult ei toeta Angular veel veebikomponente, kuid nurgahoidlas on haru ja kui ma nägin, et ta otsustas sellega mängida ja vaadata, kuidas see töötab. Nurga meeskond nimetas seda paketti “@ nurgeline / elemendid”. Uurimistulemused olid tõesti muljetavaldavad, nii palju, et otsustasin kirjutada teema ja seda teiega jagada (ma ei ole ajaveebi ajaja ega kirjuta liiga palju, aga see uuring oli erandlik!).

Kuidas veebikomponente luua?

Ütleme nii, et tahame luua nurga all tavalisi veebikomponente. See on liiga lihtne :) lubage mul näidata, kuidas:

Esimene samm on uue projekti loomine nurgaklika abil:

"uute veebikomponentide näidis"

Järgmine samm on lisada standardne nurkkomponent ja lasta seda nimetada nagu nupule:

"n g-komponent nagu nupp"

Enne seda oli see tavaline värk, mida teeme iga päev, nüüd peame selle uue komponendi kuidagi veebikomponendina registreerima ja eksportima. Selle saavutamiseks peame tegema neli lihtsat sammu:

  1. kopeeri @ nurga / elementide klassid meie projekti nurgahoidlast, peame seda tegema käsitsi, kuna seda paketti ei ole veel välja antud
  2. installige @ veebikomponendid / kohandatud elemendid ja importige see polütäidetena: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. muutke rakendust.module.ts, lisage sisendkomponentidesse kõik meie komponendid, millest me tahame saada veebikomponentideks, samuti peame muutma alglaadimiste konfiguratsiooni järgmiselt: https://github.com/playerx/angular-elements-sample/blob/ master / src / app / app.module.ts
  4. muuda main.ts nii: 'https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts'

See selleks, meie standardsed nurkkomponendid said veebikomponentideks.

Töönäidet näete aadressil:

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

(lähtekood: https://github.com/playerx/angular-elements-sample)

Mis siin juhtus:

  • Ühe rakenduse juurkomponendi eksportimise ja kasutamise asemel saame nüüd oma index.html-failis või kuskil mujal kasutada ja kasutada mitut veebikomponenti
  • Meie standardkomponendid võivad olla veebikomponendid, lihtsalt registreerides need sisendkomponentides

Kui ma esimest korda avastasin, et mõtlesin nii lihtsale? jah, lihtne hernes :) aga see on alles uurimistöö algus!

Enne järgmise osa juurde liikumist vaatame, millised failid genereeritakse:

  • inline.bundle.js - see on väike veebipaketi skript moodulite laadimiseks
  • vendor.bundle.js - nurgaraamatukogud ja kolmanda osapoole teegid
  • polyfills.bundle.js - polüfillid
  • main.bundle.js - meie komponendid
  • stiilid.bundle.css - globaalsed stiilid, näiteks materjalistiilid

Kuidas veebikomponente kasutada?

Oleme loonud veebikomponendi nimega “rakenduse moodi nupp”, kasutagem seda nüüd ühes teises täiesti erinevas projektis. Loome veel ühe nurgaprojekti ja toimime järgmiselt.

  1. installige @ veebikomponendid / kohandatud elemendid ja importige see polütäidetena: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. lubage kohandatud skeemid rakenduses.module.ts: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. hakake kasutama meie uut veebikomponenti niimoodi:
     Komponent laaditakse siia
  4. Laadige veebikomponentide skriptid - võimaldab seda osa üksikasjalikumalt arutada

Laadige veebikomponentide skriptid

peame oma esimesest projektist laadima järgmised skriptid:

  • inline.bundle.js - see loob "isoleeritud ulatuse" raamatukogudest, mida vajame veebikomponentide jaoks
  • vendor.bundle.js - nurgaraamatukogud ja kolmanda osapoole teegid, mida kasutasime veebikomponentide jaoks
  • main.bundle.js - komponendid ise

me ei laadi polyfills.bundle.js ja stiile.bundle.css ja natuke hiljem selle kohta.

niipea kui need skriptid laaditakse sisse ja sisestatakse meie html-i, rakenduselaadne nupukomponent aktiveeritakse, asendatakse tekst "komponent laaditakse siia" tekstiga komponendiga. demo jaoks olen loonud lihtsa skriptilaaduri: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

Täielikku toimivat näidet saate vaadata aadressil:

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

(lähtekood: https://github.com/playerx/angular-webcomponents-usage-sample)

Nüüd arutame, milliseid täiendavaid eeliseid saame nurga- ja veebikomponentide kombineerimisega

Marsruutimine

Üks asi, mis mind huvitas, on minu veebikomponendi sees võimsa nurkkiirutuse kasutamine. Seal oli üks probleem, ma ei tahtnud kasutada standardset marsruutimist, kuna see muudab URL-i ja ma ei taha, et mu veebikomponent URL-i muudaks, on globaalse marsruutimise sel viisil haldamine väga keeruline.

Vajan midagi, mis salvestaks marsruutimisteavet mällu ja see on MockLocationStrategy, see on mõeldud testimiseks, kuid sobib täpselt minu vajadustega. Demoprojektides näete marsruutimisega veebikomponenti - “app-module-shell”.

Arvan, et kui peate veebikomponendi marsruutimise ajal URL-i muutma, peaksite looma sündmuse ja käsitlema URL-i marsruutimist põhirakenduses.

Varju Dom

Nendes näidetes ei ole ma loomise vaate kapseldamist loonud, põhjus on lihtne, materjalide teek seda praegu ei toeta (https://github.com/angular/material2/issues/3386), kuid võite komponente luua vabalt shadow dom'iga olen seda proovinud ja see töötab suurepäraselt

Theming

Siit tuleb minu lemmik, kui mäletate, et me ei laadinud oma uude rakendusse stiili.bundle.css. Põhjus on lihtne, me ei soovinud veebikomponendi teemat, kuna meil on oma. Ja jah, saate luua mõne teemaga materjalide kujundamisega veebikomponente ja kasutada seda mõnes muus rakenduses ning rakenduse teema rakendatakse, vaadake seda näidet:

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

nende kasutamine teises rakenduses - https://angular-webcomponents-usage-sample.now.sh

vaadake rakenduse moodul-kesta pärast klõpsamist nupul „Laadige moodul”.

teadaolevad probleemid

  • Kui kasutate veebikomponenti mõnes teises veebikomponendis samas rakenduses, kus veebikomponendid on deklareeritud, renderdatakse need kaks korda. Põhjus on lihtne Nurk renderdab komponendi ja ka selle veebikomponendina. See on nurkmeeskonna jaoks teadaolev probleem ja ma arvan, et varsti on lahendus. Praegu saan lahendusena soovitada järgmist:
     Ütleme, et meil on kliendi moodul ja tahame mõnda komponenti teiste moodulitega jagada, siis tuleb ümber ehitada kaks moodulit:
    1. kliendid-veebikomponendid - mis majutavad kõiki veebikomponente
    2. kliendid - kes neid kasutab
    3. teine ​​moodul - mis kasutab ka kliendi veebikomponente

Tehke kokkuvõte

Olen proovinud näidata, kuidas saate luua ja kasutada veebikomponentide võimsust ja nurgeliselt koos. On palju rohkem juhtumistsenaariume, mida saab katta nende kahe hämmastava kraami segamisel, neist olen vaid mõned.

Peaksite lõpus videot vaatama, see oli minu uurimistöö esimene säde.

Siin on ka töönäited:

Veebikomponentide loomine - https://github.com/playerx/angular-elements-sample

Veebikomponentide kasutamine - https://github.com/playerx/angular-webcomponents-usage-sample

Tänud lugemise eest :)