Kuidas oma nurgakomponente üles ehitada ja kõikjal kasutada

Angular on teine ​​enimkasutatud esiotsa Javascriptipõhine raamistik (kui arvestada esimest AngularJs ja Angular 2+), Angular on Google'i toetatud raamistik, see avaldati 2016. aastal pärast seda, kui ta oli oma eelmise versiooni AngularJs täielikult ümber kirjutanud 2010. Angulari üks peamisi omadusi oli võime areneda mitme platvormi jaoks: veebi-, mobiili- ja loomuliku töölaua jaoks. Mis teeb Nurga ahvatlevaks.

Nurga all on rohkem kui ainult tööriistad, see pakub ka kujundusmustreid, et ehitada teile rakendus üles hästi struktureeritud viisil. Nurgaline korralduskood mooduliteks, moodulid muudavad funktsioonideks ja korduvkasutatavateks tükkideks eraldatud rakenduse. See võimaldab ka meeskonna liikmetel ülesandeid laiska laadida ja jagada vastavalt sobivatele rollidele.

Nurkkomponendid on laiendatavad ja lahti ühendatud, mis võimaldab kasutajatel keerukamate loomiseks komponeerida mitu lihtsat ja hõlpsasti asendatavat komponenti, eraldades esitluse manipuleerimise ja rakenduse loogika selgelt.

Loome meie esimese nurkkomponendi.

Meie projekti loomiseks peame installima AngularCLI (npm install -g @ angular / cli) ja seejärel loome oma uue projekti koos:

uus

Loodud projekt sisaldab:

  • Vaikne nurkprojekt.
  • Kõik sõltuvused installitakse sõlme mooduli kausta
  • Iga komponendi failide testimine.

Loome komponendi, sellel on 2 sisendit, et lähtestada muutujad hostikomponendist (muudest raamistikest / raamatukogudest) ja saata sündmus, et värskendada ühte neist väärtustest hostis, et simuleerida täieliku interaktsiooni stsenaariumi.

Nüüd, kui meie nurkkomponent töötab, saame selle ehitada veebikomponendina, kasutades nurkdetaili; see on funktsioon, mis võimaldab nurgakomponente pakkida kohandatud elementidena, mis tutvustatakse koos nurga 6 väljaandmisega.

Selle teostamiseks peate esmalt installima mõned sõltuvused.

npm install - salvestage @ nurk / elemendid
npm install - salvestage @ webcomponents / webcomponentsjs
npm install - salvestage dokument-register-element

Faili angular.json sees peate importima faili document-register-element.js.

Järgmine samm on meie AppModule alglaadimisribade muutmine. selleks peame bootstrap-massiivi ümber nimetama sisendkomponentideks, et takistada AppComponentil mooduliga alglaadimist.

Järgmisena saate luua kohandatud elementide impordi injektori @ nurgast / südamikust ja luua faili @ nurga / elemendidCustomElement; see funktsioon tagastab klassi NgElementConstructor, mille linkime kindla HTML-i sildiga.

Lõpuks peame alglaadimisfunktsiooni alistamiseks lisama ngDoBootstrap.

Injektor on viide mooduli kontekstile. See võimaldab kõigil samas rakenduses loodud elementidel jagada sama konteksti ja moodustada ühe nurgarakenduse. Nad saavad omavahel suhelda, ruuterit jagada, kasutades sama NgRx poodi ...

Täieliku näite leiate minu githubi hoidlast

Kasutage oma nurga kohandatud elementi VueJ-i komponendi sees:

Nurga kohandatud elemendi kasutamiseks VueJs-i komponendis peate importima ehitatud js-failid ja faili stílus.css avalikus kaustas oleva faili index.html sees.

Siis saate seda kasutada nagu mis tahes muud komponenti või html-silti, lisades selle lihtsalt oma komponendi HTML-malli. Selles näites demonstreerime, kuidas see komponent oma hostiga suhtleb, saades andmeid sisendina ja väljastades sündmusi, kui selle väärtus muutub, või muutes selle hostimuutuja väärtust, kasutades kahesuunalist sidumist.

Kasutage oma nurga all kohandatud elementi polümeeri sees:

Elemendi Angular Custom kasutamiseks polümeeri komponendis peate importima sisseehitatud Javascripti failid. peamine, käitusaeg, polütäidised ja käitusaeg ning pange silt komponendi html-malli sisse.

Nagu näete selles näites, kasutame nurgakomponendiga suhtlemiseks kahesuunalist sidumist. Peaksite seda tähele panema, nagu on selgitatud polümeeri dokumentatsioonis; natiivsete elementide või mittepolümeersete elementidega, mis ei järgi seda sündmuste nimetamise tava, kahesuunaliseks sidumiseks, saate märkuses kohandatud muudatuse sündmuse nime määrata järgmise süntaksi abil:

target-prop = "{{hostProp :: target-change-event}}"

Kasutage oma ehitatud nurga all kohandatud elementi Reakt-komponendi sees

Elemendi Nurga kohandatud kasutamiseks peate importima sisseehitatud Javascripti failid, mida saate kasutada tavalise komponendina oma komponendi sees.

Nagu näete, suhtleme võõrustaja ja alamkomponendi vahel kohandatud sündmuste kaudu.

Kasutage tavalise JavaScriptiga elementi Nurga kohandatud

Ehitatud nurga all kohandatud elemendi kasutamiseks peate selle importima HTML-faili, nagu mis tahes muu javascripti kood, importima polüfillide, käitus- ja skriptifailid.

Saame Javascriptiga muuta atribuutide väärtust nagu mis tahes HTML-i elemente ning võime kuulata sündmusi ja muuta DOM-i muid osi.

Täname, et lugesite seda artiklit. Täielikud näited leiate sellest hoidlast. See sisaldab näidete koodi ja viisi näidete kohalikuks käitamiseks, kui soovite katsetada.

Kui teil on tagasisidet või soovite midagi sellesse artiklisse lisada, lisage meile siia kommentaar.

Võite mind jälgida ka twitteris.