Kulma- ja web-komponentit, mm. Kulmaelementit

Noin

Tässä aiheessa haluan jakaa tulokset tutkimuksistani, joka on saatu Angular 5: tä ja web-komponentteja varten. Näemme kuinka voimme luoda ja käyttää web-komponentteja kulmassa 5 ja millaisia ​​etuja voimme saada.

Kulmaelementit

Virallisesti Angular ei tue vielä verkkokomponentteja, mutta kulmavarastossa on haara ja kun näin sen päättäneen leikkiä sen kanssa ja nähdä miten se toimii. Kulmajoukot nimittivät tämän paketin “@ angular / elements”. Tutkimustulokset olivat todella vaikuttavia, niin paljon, että päätin kirjoittaa aiheen ja jakaa sen kanssasi (en ole bloggaaja ja en kirjoita liikaa, mutta tämä tutkimus oli poikkeuksellinen!).

Kuinka luoda Web-komponentteja

Oletetaan, että haluamme luoda vakioverkkokomponentteja kulmilla, Se on liian yksinkertaista :) anna minun näyttää kuinka:

Ensimmäinen askel on uuden projektin luominen kulmakuvakkeella:

`uusia web-komponentteja-näytettä`

Seuraava vaihe on lisätä vakiokulmakomponentti ja antaa sen kutsua "like-button":

`n g komponenttia kuten-painiketta`

Ennen sitä oli tavallista tavaraa, jota teemme joka päivä, nyt meidän on jotenkin rekisteröitävä ja vietävä tämä uusi komponentti web-komponentiksi, jotta saavuttaisimme tämän, meidän on tehtävä neljä helppoa vaihetta:

  1. kopioi @ kulma / elementtiluokat projektin kulmavarastosta, meidän on tehtävä tämä manuaalisesti, koska tätä pakettia ei ole vielä julkaistu
  2. asenna @ webcomponents / custom-elements ja tuo se polyfills-tiedostoihin: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. muuta app.module.ts, lisää kaikki komponentit entryComponents-tietokannasta, joista haluamme tulla web-komponentteja, ja myös meidän on muutettava käynnistyslokeron kokoonpano seuraavasti: https://github.com/playerx/angular-elements-sample/blob/ master / src / app / app.module.ts
  4. muuta main.ts näin: 'https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts'

Siinäpä, vakiokulmakomponenteistamme tuli web-komponentteja.

Näet toimivan esimerkin osoitteessa:

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

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

Joten mitä täällä tapahtui:

  • Sen sijaan, että vietämme ja käyttäisimme yhtä sovellusjuurikomponenttia, meillä voi nyt olla useita web-komponentteja ja käyttää niitä index.html-tiedostossamme tai muualla
  • Vakiokomponentimme voivat olla web-komponentteja rekisteröimällä ne vain entryComponents-tietokantaan

Kun huomasin ensin, että ajattelin niin yksinkertaista? kyllä, helppo herne :), mutta se on vasta tutkimuksen alku!

Katsotaanpa ennen siirtymistä seuraavaan osaan, mitä tiedostoja luodaan:

  • inline.bundle.js - tämä on pieni webpack-skripti moduulien lataamista varten
  • vendor.bundle.js - kulmikirjastot ja kolmannen osapuolen kirjastot
  • polyfills.bundle.js - polyfills
  • main.bundle.js - komponentit
  • tyylit.bundle.css - globaalit tyylit, esimerkiksi materiaalityylit

Kuinka käyttää Web-komponentteja

Olemme luoneet web-komponentin nimeltä "app-like-button", käytämme sitä nyt toisessa aivan erilaisessa projektissa. Luotaan toinen kulmaprojekti ja suoritetaan seuraavat vaiheet:

  1. asenna @ webcomponents / custom-elements ja tuo se polyfills-tiedostoihin: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. Ota mukautetut mallit käyttöön sovellusmoduulissa.ts: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. alkaa käyttää uutta verkkokomponenttiamme näin:
      -komponentti ladataan tähän
  4. Lataa verkkokomponentti-skriptit - keskustellaan tästä osasta yksityiskohtaisesti

Lataa verkkokomponentti-skriptit

meidän on ladattava seuraavat skriptit ensimmäisestä projektistamme:

  • inline.bundle.js - tämä luo "erillisen laajuuden" kirjastoille, joita tarvitsemme verkkokomponenteille
  • vendor.bundle.js - kulmakirjastot ja kolmannen osapuolen kirjastot, joita käytimme web-komponentteihin
  • main.bundle.js - komponentit itse

emme lataa polyfills.bundle.js ja styles.bundle.css ja vähän myöhemmin siitä.

heti kun nämä skriptit ladataan ja injektoidaan HTML-muotoon, sovelluksen kaltainen -painikekomponentti tulee eläväksi, ”komponentti ladataan tähän” teksti korvataan itse komponentilla. Demolle olen luonut yksinkertaisen komentosarjojen latauksen: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

Voit tarkistaa täydellisen toimivan esimerkin osoitteessa:

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

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

Keskustelemme nyt, mitä lisäetuja voimme saada aikaan kulma- ja web-komponenttien yhdistämisellä

reititys

Yksi asia, josta olin kiinnostunut, on tehokkaan kulmareitityksen käyttäminen web-komponenttini sisällä. Oli yksi ongelma, en halunnut käyttää vakioreititystä, koska se muuttaa URL-osoitetta, enkä halua, että Web-komponentti vaihtaisi URL-osoitetta, globaalin reitityksen hallitseminen tällä tavalla on paljon vaikeaa.

Tarvitsen jotain, joka tallentaa reititystiedot muistiin. Se on MockLocationStrategy, tämä on tarkoitettu testaamiseen, mutta sopii tarpeisiini tarkalleen. Demoprojekteissa voit nähdä reitittimellä varustetun web-komponentin - “app-module-shell”.

Luulen, että jos sinun on muutettava URL-osoitetta web-komponentin reititettäessä, sinun on luotava tapahtuma ja käsiteltävä URL-osoitteen reititystä pääsovelluksessa.

Varjo Dom

En ole luonut näissä esimerkeissä natiivinäkymän kotelointia, syy on yksinkertainen, materiaalikirjasto ei tue sitä tällä hetkellä (https://github.com/angular/material2/issues/3386), mutta voit vapaasti luoda komponentteja varjossa dom, olen kokeillut sitä ja se toimii täydellisesti

teemallaName

Täältä tulee suosikkini, jos muistat, että emme ladanneet style.bundle.css uuteen sovellukseemme. Syy on yksinkertainen, emme halunneet web-komponentin teemaa, koska meillä on omamme. Ja kyllä, voit luoda web-komponentteja materiaalisuunnittelulla jollain teemalla ja käyttää sitä toisessa sovelluksessa. Sovelluksen teema otetaan käyttöön, katso tämä esimerkki:

web-komponenttien luominen - https://angular-elements-sample.now.sh

niiden käyttäminen toisessa sovelluksessa - https://angular-webcomponents-usage-sample.now.sh

tarkista app-module-shell, kun olet napsauttanut “Load Module”.

Tunnetut ongelmat

  • Jos käytät web-komponenttia toisessa web-komponentissa samassa sovelluksessa, jossa web-komponentit on ilmoitettu, ne renderoidaan kaksi kertaa. Syy on yksinkertainen. Kulmainen tekee komponentista ja myös sen Web-komponentiksi. Tämä on tunnettu ongelma kulmikkaalle joukkueelle, ja mielestäni pian löytyy ratkaisu. Toistaiseksi voin ehdottaa seuraavaa:
     Sanotaan, että meillä on asiakasmoduuleja ja haluamme jakaa joitain komponentteja muiden moduulien kanssa, kiertotapa on luoda kaksi moduulia:
    1. asiakkaat-web-komponentit - jotka isännöivät kaikkia web-komponentteja
    2. asiakkaat - kuori - joka käyttää niitä
    3. toinen moduuli - joka käyttää myös asiakkaan web-komponentteja

Tee yhteenveto

Olen yrittänyt osoittaa, kuinka voit luoda ja käyttää verkkokomponenttien voimaa ja kulmikkaasti yhdessä. On paljon enemmän tapausskenaarioita, jotka voidaan kattaa sekoittamalla nämä kaksi hämmästyttävää tavaraa, olen peittänyt vain muutamat niistä.

Sinun kannattaa katsoa videon lopussa, se oli ensimmäinen tutkimukseni kimallus.

Tässä ovat myös toimivia esimerkkejä:

Verkkokomponenttien luominen - https://github.com/playerx/angular-elements-sample

Verkkokomponenttien käyttö - https://github.com/playerx/angular-webcomponents-usage-sample

Kiitos lukemisesta :)