Szög- és webkomponensek, a.k.a

Ról ről

Ebben a témakörben meg szeretném osztani a kutatási eredmények eredményeit, amelyeket kaptam az 5. szög és a webes összetevők kapcsán. Látjuk, hogyan lehet webes összetevőket létrehozni és használni az 5. szögben, és milyen előnyöket élvezhetünk.

Szög elemek

Hivatalosan az Angular még nem támogatja a webkomponenseket, de van egy ág a szögletes tárolóban, és amikor láttam, hogy úgy dönt, hogy játszik vele, és megnézem, hogyan fog működni. A szögletes csapat ezt a csomagot „@ szög / elemek” -nek nevezte. A kutatási eredmények annyira lenyűgözőek voltak, hogy úgy döntöttem, hogy írok egy témát, és megosztom veled (nem vagyok blogger és nem írok túl sokat, de ez a kutatás kivételes volt).

Webes összetevők létrehozása

Tegyük fel, hogy szabványos webes összetevőket akarunk létrehozni a Szög használatával, Ez túl egyszerű :) hadd mutassam meg, hogyan:

Az első lépés egy új projekt létrehozása szögletes klíma segítségével:

"új web-összetevők-minta"

A következő lépés egy szögletes komponens hozzáadása, amelyet úgy hívhatunk, mint a "gomb":

"nem olyan alkatrész, mint gomb"

Előtte szokásos dolgok voltak, amit minden nap csinálunk, most ezt az új összetevőt valamilyen módon regisztrálnunk kell és exportálnunk kell webes összetevőként. Ennek eléréséhez négy egyszerű lépést kell tennünk:

  1. copy @ angular / elements osztályok a szögtárból a projektünkben, ezt manuálisan kell megtennünk, mert ezt a csomagot még nem engedtük fel
  2. telepítse a @ webkomponenseket / egyéni elemeket, és töltse be töltse ki: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. változtassa meg az app.module.ts fájlt, és adja hozzá az összes összetevőt a entryComponents elemhez, amelyet webes összetevővé akarunk tenni, és a következőképpen kell megváltoztatnunk a bootstrap konfigurációját: https://github.com/playerx/angular-elements-sample/blob/ master / src / app / app.module.ts
  4. a main.ts módosítása így: 'https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts'

Ennyi, a szokásos szögkomponenseink webkomponensekké váltak.

Láthatja a működő példát a következő címen:

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

(forráskód: https://github.com/playerx/angular-elements-sample)

Tehát mi történt itt:

  • Ahelyett, hogy exportálnánk és felhasználnánk egy app-root komponenst, most már több web-összetevő is lehet és használható az index.html fájlban, vagy valahol másutt
  • Szabványos alkatrészeink webes alkotóelemek is lehetnek, ha regisztráljuk azokat a entryComponents webhelyen

Amikor először rájöttem, hogy ilyen egyszerűnek gondolom? igen, könnyű borsó :), de ez csak a kutatás kezdete!

Mielőtt továbblépnénk a következő részhez, nézzük meg, hogy mely fájlok készülnek:

  • inline.bundle.js - ez egy kis webpack szkript a modulok betöltéséhez
  • vendor.bundle.js - szögletes könyvtárak és harmadik fél könyvtárak
  • polyfills.bundle.js - polyfills
  • main.bundle.js - összetevőink
  • stílusok.bundle.css - globális stílusok, például anyagstílusok

Hogyan kell használni a webes összetevőket

Készítettünk egy „app-like-button” nevű web-összetevőt, amelyet most egy másik teljesen más projektben használhatunk. Készítsünk egy másik szögletes projektet, és tegyük a következő lépéseket:

  1. telepítse a @ webcomponents / custom-elements elemeket és töltse ki őket töltelék kitöltésekkel: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. engedélyezze az egyedi sémákat az app.module.ts webhelyen: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. kezdje el használni az új web-összetevőnk használatát:
     Az összetevő itt kerül betöltésre
  4. Webes összetevők parancsfájljainak betöltése - lehetővé teszi ennek a résznek a részleteit

Töltsön be webes összetevő szkripteket

az első projektünkből be kell töltenünk a következő szkripteket:

  • inline.bundle.js - ez létrehoz egy „izolált hatókört” a könyvtárakhoz, amelyekre szükségünk van a webes összetevőkhöz
  • vendor.bundle.js - szögletes könyvtárak és harmadik fél könyvtárak, amelyeket webes összetevőkhöz használtunk
  • main.bundle.js - maga az összetevő

nem töltjük be a polyfills.bundle.js és stílus.bundle.css fájlokat, és kicsit később erről.

amint ezeket a szkripteket betöltjük és behúzzuk a html-be, az app-like-button komponens életre válik, az 'alkatrész itt lesz betöltve' szöveg helyébe a komponens lép. a bemutatóhoz egyszerű szkriptbetöltőt hoztam létre: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

A teljes működési példát a következő címen tekintheti meg:

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

(forráskód: https://github.com/playerx/angular-webcomponents-usage-sample)

Most tárgyaljuk meg, milyen további előnyeket érhetünk el a szögletes és webes összetevők kombinálásával

útvonalválasztás

Egy dolog, ami érdekel, a nagy teljesítményű szögletes útválasztás használata a webkomponensben. Volt egy probléma, nem akartam használni a szokásos útválasztást, mert az megváltoztatja az URL-t, és nem akarom, hogy a webkomponens megváltoztassa az URL-t, sokkal nehezebb így kezelni a globális útválasztást.

Szükségem van valamire, amely mentheti az útválasztási információkat a memóriába, és ez a MockLocationStrategy, ez a teszteléshez készült, de pontosan megfelel az igényeimnek. A demoprojektekben webes összetevőt láthat az útválasztással - „app-module-shell”.

Úgy gondolom, hogy ha meg kell változtatnia az URL-t, miközben a web-összetevő útvonala van, hozzon létre egy eseményt, és kezelje az URL-útválasztást a fő alkalmazásban.

Shadow Dom

Ebben a példában nem készítettem natív nézet beágyazást, az ok egyszerű, az anyagkönyvtár jelenleg nem támogatja azt (https://github.com/angular/material2/issues/3386), de szabadon készíthet komponenseket az árnyék dom-val kipróbáltam, és ez tökéletesen működik

rendszerezést

Itt jön a kedvencem, ha emlékszel, hogy nem töltöttük be a stílus.bundle.css fájlt az új alkalmazásunkba. Az ok egyszerű, nem akartuk a webkomponens témáját, mert megvan a miénk. És igen, létrehozhat webes összetevőket anyagi formatervezésű, bizonyos témákkal, és felhasználhatja azokat egy másik alkalmazásban, és az alkalmazás témája kerül alkalmazásra, nézd meg ezt a példát:

webes összetevők létrehozása - https://angular-elements-sample.now.sh

használja őket egy másik alkalmazásban - https://angular-webcomponents-usage-sample.now.sh

nézze meg az app-module-shell-t, miután rákattintott a „Load Module” -ra.

ismert problémák

  • Ha a web-összetevőt egy másik web-összetevőben fogja használni ugyanabban az alkalmazásban, ahol a web-összetevőket deklarálják, akkor azok kétszer kerülnek megjelenítésre. Az ok egyszerű. A szögletes teszi az összetevőt, és webes összetevőként is. Ez a szögletes csapat számára ismert probléma, és azt hiszem, hamarosan megoldást találnak. Jelenleg megoldásként javasolhatom a következőket:
     Tegyük fel, hogy van vásárlói modulunk, és szeretnénk megosztani egyes komponenseket más modulokkal, a következő lépésként két modul jön létre:
    1. ügyfelek-web-összetevők - amelyek az összes web-összetevőt befogadják
    2. ügyfelek-héj - amely felhasználja őket
    3. másik modul - amely az ügyfél webes összetevőit is felhasználja

Összesít

Megpróbáltam bebizonyítani, hogy miként lehet létrehozni és felhasználni a webes összetevők erejét és a szöget együtt, sokkal több olyan eset van, amely fedezhető fel a két csodálatos dolog összekeverésével, ezek közül csak néhányat fedeztem fel.

Nézze meg a videót a végén, ez volt a kutatásom első szikrája.

Itt találhatók a működő példák is:

Webes összetevők létrehozása - https://github.com/playerx/angular-elements-sample

Webes összetevők használata - https://github.com/playerx/angular-webcomponents-usage-sample

Köszönöm, hogy elolvasta :)