Kuidas luua kohandatud nurga elementi

Ehitage nullist üles gif-otsingumootor ja koondage see nurgelemendi abil.

Nurga element võimaldab teil nurkkomponenti kasutada väljaspool nurga rakendust. See seob komponendi, mille saab manustada mis tahes veebirakendusse kohandatud elemendina. Kohandatud element laiendab HTML-i, lubades määratleda sildi, mille sisu on loodud ja JavaScripti hallatav.

Ehitame kohandatud elemendina GIF-otsingumootori. Seda kohandatud elementi saab kasutada mis tahes veebirakenduses.

1. Nurga CLI 6 installimine ja projekti lähtestamine

npm install -g @ nurk / cli
uus ng6-element

2. Nurga elemendi lisamine

Elementide funktsionaalsuse kasutamiseks peame oma projekti sõltuvusena lisama nurga / elements.

lisage @ nurgelised / elemendid

3. Looge komponent

Loome lihtsa komponendi. See sarnanes meie tavalise komponendiga.

n g gif-mootor

4. CSS-i stiil, kasutades Shadow DOM-i

Me kasutame ViewEncapsulation.Native, nii et kõik meie CSS-failid koondatakse JavaScripti ning komplekteeritakse komponendiklasside ja malliga ühte faili.

Komponent ja vaated sarnanevad muude nurkkomponentidega.

Meie failis gif-engine.component.ts

Meie failis gif-engine.component.html

5. Komponendi registreerimine rakendusse.module.ts

See protsess koosneb 3 lihtsast toimingust

  1. Komponentide lisamine kirjele Components. See on vajalik, kuna meie GifEngineComponent ei kuulu nurgarakenduse ühegi teise komponendi või juure alla. Komponent tuleb lisada kandesseComponents, et nurkkompilaator selle kompileeriks.
  2. Lisasime rakenduse ngDoBootstrap, et rakendust käsitsi buutida.
  3. Üleskutse luuakse saidil createCustomElement, et teisendada meie komponendi arhitektuur natiivseks DOM-i arhitektuuriks. Siin tuleb täpsustada ka meie kohandatud elemendi valija (meie puhul gif-mootor).

6. eemaldage app.component *

Kuna me käivitame rakenduse käsitsi alglaadimise, pole meie rakendust.com enam vaja. See pole kohustuslik asi. Kuid see vähendab rakenduse mahtu ja kuna me töötame kohandatud elementidega, on hea tava soovimatute asjade eemaldamiseks.

7. Rakenduse loomine

Lisage src / index.html ja nüüd saate oma rakendust silitada ng serveerimise abil. Ja selle käsu käivitamisega saate lõpptoodangu ehitada.

ehitamine - toode - väljund-räsimine = puudub

See genereerib 4 erinevat faili (runtime.js, polyfills.js, scripts.js ja main.js) ja soovime seda levitada ühe failina. Teeme selle kasutades sõlmepaketti nimega concat. Käivitage see käsk projekti kataloogis.

npm install - salvestage konkat

looge faili concat-build.js projekti juurkataloogi ja pange see kood

Värskenda package.json lisab selle skripti.

"skriptid": {
  "build: element": "ehitamine - toode - output-hashing = puudub && sõlm ./concat-build.js"
}

Nüüd saate selle käsu käivitamise abil oma toodangu genereerida.

npm run build: element

Lisage pange ülaltoodud kaks koodirida mis tahes veebirakendusse ... Valmis ...!

Meie rakendus näeb pärast ehitamist välja selline.

Kohandatud elementide brauseri tugi

Brauseri tugi selle artikli kirjutamisel. Vaadake https://angular.io/guide/elements

Siit saate hankida GitHubi hoidla

Järeldus

Olen nurgeliste elementide pärast väga elevil. See avab ukse paljudeks võimalusteks. Selle arendaja abil saab luua üheotstarbelisi väikeseid komponente ja kasutada neid mis tahes olemasolevas veebirakenduses.

Kas soovite rohkem teada nurgaelemendi kohta ..? kassas Robi jutt siin ng-confil.