Бұрыш 9 -да компоненттің жалқау жүктелуі

Блог

Бұрыш 9 -да компоненттің жалқау жүктелуі

Ivy және Angular 9 бар бұрыштық компоненттердің жалқау жүктемесі

Бұрыштық компоненттер жалқау жүктелді ме? 🤔 Сіз бұрыштық маршрутизатормен жалқау жүктеу модульдерін айтасыз!



Жоқ, сіз компоненттерді жалқау жүктейсіз!

Иә, қазіргі Angular нұсқасы модульдердің жалқау жүктелуін қолдайды. Бірақ Айви бізге жаңа мүмкіндіктер ұсынады.



Әзірге жалқау жүктеу - жалқау жүктелген маршруттар

Жалқау жүктеу - бұл керемет мүмкіндік. Бұрыштық түрде біз жалқау маршрутты жариялау арқылы ақысыз аламыз.
Бұрыш бойынша жалқау жүктеу 9

Жоғарыдағы код | _+_ | үшін бөлек бөлік жасайды | _+_ | басқаннан кейін жүктеледі маршрут



Бұл негізгі пакеттің көлемін кішірейтудің және қосымшаның бастапқы жүктемесін арттырудың тамаша әдісі.

Дегенмен, егер біз жалқау жүктеуді одан да мұқият бақылауға алсақ, жақсы болар ма еді? Мысалы, жалғыз компоненттерді жалқау жүктеу арқылы?

Жалғыз компоненттерді жалқау жүктеу әзірге мүмкін болмады. Бірақ, Айвидің арқасында бәрі өзгерді.

Айви елді мекенді таныстырады.

Модульдер-бұл бірінші деңгейдегі тұжырымдама және әрбір бұрыштық қосымшаның негізгі құрылымы. Олар бірнеше компоненттерді, директиваларды, құбырлар мен қызметтерді жариялайды.

Қазіргі бұрыштық қосымшалар модульсіз бола алмайды. Мұның бір себебі - ViewEngine модульдерге барлық қажетті метадеректерді қосады.

Айви, керісінше, басқа тәсіл қолданады. Айвиде компонент модульсіз өмір сүре алады. Жергілікті деп аталатын тұжырымдаманың арқасында.

Орналасу барлық метадеректер компонент үшін жергілікті екенін білдіреді.

Мұны түсіндіруге рұқсат етіңіз | _+_ | Айви арқылы жасалған жинақ.
Бұрыш бойынша жалқау жүктеу 9

Компоненттер коды бөлімінде Айви біздің құрамдас кодты сақтайтынын көреміз. Ерекше ештеңе жоқ. Бірақ содан кейін Айви оған кейбір метадеректерді қосады.

Ол қосатын бірінші метадеректер - бұл біздің компонентті қалай құруды білетін зауыт (Компоненттер фабрикасы). Компоненттік метадеректер бөлімінде Айви | _+_ |, | _+_ | сияқты басқа атрибуттарды қосады. және т.…, жұмыс уақытында қажет нәрсенің бәрі.

Айви қосатын ең қызықты нәрселердің бірі - бұл _ _+_ | функция. Бұл қосымша түсініктемелерге тұрарлық.

Үлгі функциясы - бұл біздің HTML -дің құрастырылған нұсқасы. Ол біздің DOM құру үшін Ivy нұсқауларын орындайды. Бұл ViewEngine жұмыс істеу әдісінен ерекшеленеді.

ViewEngine біздің кодты алды және оны қайталады. Егер біз оны қолданатын болсақ, бұрыштық кодты орындайды.

Айви тәсілімен компонент жүргізуші орындығында орналасқан және бұрыштық орындалады. Бұл өзгеріс компоненттің өз бетімен өмір сүруіне мүмкіндік береді және бұрыштық өзекті ағашты шайқалтады.

Жалқау компонентті жүктеудің нақты мысалы

Енді жалқау жүктеу мүмкін екенін білсек, біз оны нақты жағдайда қолданамыз. Біз викториналық қосымшаны енгіземіз.

Қолданба әр түрлі шешімдері бар қала бейнесін көрсетеді. Пайдаланушы шешімді таңдағаннан кейін, басылған батырманың жауабы қызыл немесе жасылға бұрылып дұрыс болғанын бірден көрсетеді.

Сұраққа жауап бергеннен кейін келесі сұрақ пайда болады. Міне жылдам қарау:
Бұрыш бойынша жалқау жүктеу 9

Жалқау жүктеу туралы түсінік

Алдымен жалқау жүктеудің жалпы идеясын көрсетейік | _+_ | компонент
Бұрыш бойынша жалқау жүктеу 9

Пайдаланушы викторинаны «Бастау викторинасы» түймесін басу арқылы бастағаннан кейін, біз өз компонентімізді жалқау жүктей бастаймыз. Біз компонентті ұстағаннан кейін оны контейнерге қосамыз.

Біз | _+_ | -ге жауап береміз біздің стандартты компоненттердегідей жалқау жүктелген компоненттің шығыс оқиғалары. Бірде | _+_ | шығу оқиғасы орын алады, біз жаңа викторина картасын қосамыз.
Бұрыш бойынша жалқау жүктеу 9

Түсіндім - кодты қарастырайық

Жалқау компонентті жүктеу процесін түсіндіру үшін біз өзіміздің | _+_ | жеңілдетілген нұсқасынан бастаймыз. ол сұрақ қасиеттерін қарапайым түрде көрсетеді.

Содан кейін біз бұрыштық материал компоненттерін қосу арқылы компонентімізді кеңейтеміз. Ақырында, біз жалқау жүктелген компоненттің шығыс оқиғаларына жауап береміз.

Сонымен, әзірше жалқау | _+_ | -нің жеңілдетілген нұсқасын жүктейік онда келесі үлгі бар:
Бұрыш бойынша жалқау жүктеу 9

Бірінші қадам - ​​контейнер элементін жасау. Ол үшін біз | _+_ | сияқты нақты элементті қолданамыз немесе біз | _+_ | қолдана аламыз , бұл қосымша HTML деңгейін енгізбейді.
Бұрыш бойынша жалқау жүктеу 9

Біздің компонентте контейнерді ұстау керек. Ол үшін | _+_ | таңбасын қолданамыз аннотация және оған | _+_ | оқығымыз келетінін айтыңыз.

Ескерту: 9 бұрышында @ViewChild аннотациясындағы статикалық конфигурация әдепкіде жалған болады.
Бұрыш бойынша жалқау жүктеу 9

Керемет, біз контейнерді алдық, онда біз жалқау жүктелген компонентті қосқымыз келеді. Содан кейін бізге | _+_ | қажет және | _+_ | біз екеуіміз де тәуелділік инъекциясын жеңе аламыз.

A | _+_ | | |++_ | құрайтын компоненттерді салыстыратын қарапайым тізілім компоненттер даналарын құру үшін қолдануға болатын сыныптар.
Бұрыш бойынша жалқау жүктеу 9

Жарайды, бұл сәтте бізде мақсатқа жету үшін қажет нәрсенің бәрі бар. | _+_ | -Ді өзгертейік әдіс және жалқау біздің компонентті жүктейді.
Бұрыш бойынша жалқау жүктеу 9

Біз ECMAScript | _+_ | пайдалана аламыз жалқау жүктеу функциясы біздің | _+_ |. Импорт туралы мәлімдеме бізге уәде береді, біз оны қолданамыз | _+_ | немесе | _+_ | арқылы өңдеуші Уәде шешілгеннен кейін біз компонентті түсіну үшін деструктуризацияны қолданамыз.

| _+_ | Пайдаланбаңыз | _+_ | құрастырған кезде JS аймағы жергілікті | _+_ | түзете алмайды мәлімдемелер. Сондықтан өзгерістерді анықтау кезінде қиындықтар туындауы мүмкін. Егер сіз кодты | _+_ | деп құрастырсаңыз | _+_ | | пайдалану керек кері шақыру функциясы бар өңдеуші.

Артқа үйлесімді болу үшін бізге қазіргі уақытта | _+_ | қажет. Болашақта бұл жол қажет болмайды, өйткені біз компонентпен тікелей жұмыс жасай аламыз.

| _+_ | бізге | _+_ | береді біз содан кейін | _+_ | -мен бірге | _+_ | -ге өтеміз біздің контейнер әдісі.

| _+_ | бізге | _+_ | қайтарады онда біздің компоненттің данасы бар. Біз бұны қолданамыз | _+_ | өту үшін | _+_ | біздің компоненттің қасиеттері.
Бұл компонентті жалқау жүктеу үшін қажет.
Бұрыш бойынша жалқау жүктеу 9

Бастау түймесі басылғаннан кейін біз компонентті жалқау жүктейміз. Егер біз желі қойындысын ашатын болсақ, онда біз _ _+_ | бөлігі жалқау жүктелген. Іске қосылған бағдарламада компонент көрсетіледі, ал сұрақ көрсетіледі.

Материал қосайық

Қазіргі уақытта біз жалқау жүктелдік | _+_ |. Өте керемет. Бірақ біздің қолданба әлі де пайдалы емес.

Мұны қосымша мүмкіндіктер мен кейбір бұрыштық материалдық компоненттерді қосу арқылы өзгертейік.
Бұрыш бойынша жалқау жүктеу 9

Біз бірнеше әдемі материалдық компоненттерді енгіздік. Бірақ материалдық модульдерді қайда қосамыз?

Иә, біз оларды біздің _ _+_ | қосуға болар еді. Бірақ бұл бұл модульдердің жүктелетінін білдіреді. Сондықтан бұл ең жақсы шешім емес. Сонымен қатар, біздің құрылыс келесі хабарламамен сәтсіздікке ұшырады:

customers.module

Енді ше? Сіз ойлағандай, бұл мәселенің шешімі бар. Ал жауап модульдер!

реакция-туған-сурет-сырғытпасы

Бірақ бұл жолы біз оларды сәл басқаша қолданамыз. Біз шағын модуль қосамыз бірдей біздің | _+_ | ретінде файл
Бұрыш бойынша жалқау жүктеу 9

Бұл модуль сипаттамасы біздің жалқау жүктелген компонентімізге ғана тиесілі. Сондықтан бұл модуль жариялайтын жалғыз компонент - | _+_ |. | _+_ | Ішінде бөлімінде біз тек компонентімізге қажетті модульдерді қосамыз.

Ықшам жүктелген модуль модульді импорттай алмайтынына көз жеткізу үшін біз оны экспорттамаймыз.

Қолданбаны қайталап, викторинаны бастау түймесін басқанда оның қалай әрекет ететінін көрейік.
Бұрыш бойынша жалқау жүктеу 9

Тамаша! Біздің | _+_ | жалқау жүктеледі және ViewContainer-ге қосылады. Ол сонымен қатар барлық қажетті тәуелділіктерді әкеледі.

Веб-пакет-анализатор деп аталатын құралды қолданып, пакеттің қалай көрінетінін талдайық.

customer-list Интерактивті масштабталатын картаның көмегімен веб -пакеттің шығыс файлдарының көлемін визуализациялауға мүмкіндік беретін npm модулі.

Бұрыш бойынша жалқау жүктеу 9

Біздің негізгі байламның мөлшері шамамен | _+_ |. Егер біз ықыласпен жүктесек, | _+_ | | _+_ | айналасында болар еді. | _+_ | Айналасында үнемдедік жалқау жүктеу арқылы тек осы компонент. Өте керемет!

Біздің | _+_ | бөлек бөлікке жиналды. Егер біз осы бөліктің мазмұнын мұқият қарастыратын болсақ, біз тек өзіміздің | _+_ | таба алмаймыз код, бірақ біз сонымен қатар | _+_ | ішінде қолданылатын Материал модульдерін көреміз.

| _+_ | Болса да қолданылған | _+_ | және | _+_ | тек | _+_ | викторина-карта компоненттерінің бөлігінде аяқталады. Мұның себебі, біз | _+_ | біздің | _+_ | викторинаны бастау түймесін көрсету үшін. Сондықтан ол басқа бөлікке түседі.

Осы сәтте біз жалқау жүктелдік | _+_ | , онда суреті бар және мүмкін болатын жауаптары бар сүйкімді материалдық карта көрсетіледі. Бірақ егер сіз осы жауаптардың біреуін бассаңыз, бұл орын алады ма?

Сіздің жауабыңызға сүйене отырып, түйме жасылға немесе қызылға айналады. Бірақ одан басқа? Ештеңе! Енді басқа сұрақ көрсетіледі. Мұны жөндейік.

Жалқау жүктелген компоненттердің оқиғаларына реакция

Басқа сұрақ көрсетілмеген, себебі біз жалқау жүктелген компоненттің шығыс оқиғасына әлі жауап бермедік. Біз білеміз, біздің | _+_ | | _+_ | көмегімен оқиғаларды шығарады. | _+_ | Класс анықтамасына қарайтын болсақ | _+_ | екенін көре аламыз | _+_ | мұра етеді

es2015

| _+_ | Дегенді білдіреді сонымен қатар | _+_ | бар әдіс эмиссиялық оқиғаларға реакция жасауға мүмкіндік береді.
Бұрыш бойынша жалқау жүктеу 9

Біз _ _+_ | жазыламыз ағыны мен | _+_ | деп атаңыз әдісі, содан кейін біздің | _+_ | орындалады логика.

| _+_ | компонент жойылғаннан кейін жазылымды тазарту қажет. Егер | _+_ | ‘s | _+_ | өмірлік цикл ілгегі | _+_ | деп аталады Тақырып | _+_ | арқылы шақырылады және | _+_ |

type

QuizCard жүктелгендіктен, қосымша HTTP сұрауы жоқ. Біз бұрын жүктелген бөліктің мазмұнын қолданамыз, жаңа компонент жасаймыз және оны контейнерге қосамыз.

Өмірлік цикл ілмектері

Өмірлік циклдің әрбір ілгегі дерлік автоматты түрде шақырылады, егер біз жалқау | _+_ | жүктесек. Бірақ бір ілмек жоқ, қайсысын көріп тұрсыз?
Бұрыш бойынша жалқау жүктеу 9

Бұл ең алдымен ілгектер, | _+_ |. Біз компонент данасының енгізу қасиеттерін қолмен жаңартатындықтан, біз сонымен қатар | _+_ | шақыруға жауаптымыз өмірлік цикл ілгегі.

| _+_ | Қоңырау шалу мысалы, біз қолмен | _+_ | құруымыз керек объект
Бұрыш бойынша жалқау жүктеу 9

Біз қолмен | _+_ | деп атаймыз біздің компонент данасында және | _+_ | өтіңіз оған қарсылық білдіріңіз. | _+_ | бұл бірінші өзгеріс екенін көрсетеді, алдыңғы мән | _+_ | болды және қазіргі мән - бұл біздің мәселе.

Тамаша! Біз үшінші тарап модульдері бар компонентті жалқау жүктедік, шығыс оқиғаларына жауап бердік және өмірлік циклдің дұрыс ілгектерін атадық.

Қорытынды

Жалқау жүктеу компоненті өнімділікке қатысты біздің қосымшаны одан әрі оңтайландыруға үлкен мүмкіндіктер береді. Бұрыштық маршрутизатордың жалқау жүктеу мүмкіндіктерімен салыстырғанда, біз жалқау жүктегіміз келетін түйіршікті бақылауға ие боламыз.

Өкінішке орай, біздің компонентте басқа модульдерді пайдалану кезінде бізге әлі де модульдер қажет. Есіңізде болсын, бұл болашақта өзгеруі мүмкін.

Айви компоненттерге өз бетінше өмір сүруге мүмкіндік беретін елді мекенді пайдаланады. Бұл өзгеріс Angular болашағының негізі болып табылады.

#бұрыштық #веб-әзірлеу #javascript

www.youtube.com

Бұрыш 9 -да компоненттің жалқау жүктелуі

Бұрыш 9 -да компонентті жалқау жүктеу Ivy компиляторын Angular 9 -да іске асырудың арқасында мүмкін болды, сондықтан енді біз базалық шарт бойынша компонентті жалқау жүктей аламыз. Жалқау жүктеуді пакеттің аз мөлшерінің артықшылықтары бар динамикалық компоненттерді жүктеу ретінде де қолдануға болады. Ivy және Angular 9 бар бұрыштық компоненттердің жалқау жүктемесі