Duomenų įrišimas kampiniu paaiškinimu

Duomenų įpareigojimas

Motyvacija

Duomenys dažnai apibrėžia programos išvaizdą. Aiškinant tuos duomenis į vartotojo sąsają, reikia klasės logikos ( .component.ts) ir šablono rodinio ( .component.html). Kampinis sujungia juos per duomenis. Pagalvokite apie duomenų įrišimą kaip apie komponentų sąveikos įrankį.

Komponentas ir šablonas

Komponentas saugo didžiąją dalį savo logikos ir duomenų savo klasėje, dekoruotoje @Component. Šis dekoratorius klasę apibrėžia kaip komponentą su šablonu HTML. Komponento šablonas žymi programos klasę. Čia reikia sutelkti dėmesį į komponento klasę ir šabloną HTML.

Čia įvyksta duomenų įpareigojimas. Elemento ypatybės ir įvykiai gauna priskirtas vertes. Šios komponentų klasės apibrėžtos vertės atlieka vieną iš dviejų vaidmenų. Vienas iš jų yra duomenų, kuriuos tada gauna šablonas, rengimas. Kitas tvarko įvykius, kuriuos skleidžia šablono elementas.

Kodo pavyzdys

Pabandykite naudoti šį paveikslėlį kaip mentalinį modelį kitame skyriuje.

Įrišimo nurodymai

Duomenys surišami dviem būdais: vienkryptis ir dvikryptis. Kampinis techniškai naudoja tik vienakryptį duomenų srautą. Dvikryptis srautas galiausiai yra vienakryptis. Tai atsitinka dviem kryptimis vienkartinio srauto, vieną kartą kiekvienai krypčiai. Apie tai vėliau.

Vienakryptis srautas apibrėžia vienpusę sąveiką. Arba komponentas siunčia duomenis į šabloną, arba šablonas skleidžia įvykį komponento logikai. Duomenų pakeitimai, patenkantys į šabloną, nėra perkeliami į komponentų klasę. Įvykį skleidžiantis veiksmas yra vienos krypties operacija, pradedama nuo šablono elementų.

Dvikryptis sudaro abi puses. Tai reiškia, kad klasės logikos arba šablono HTML duomenų pakeitimai išlieka. Pakeitimų apimtis yra komponento požiūris. Rodinyje yra komponento klasė ir šablonas kartu.

Elemento ypatybės

Norėdamas atpažinti su duomenimis susietų elementų savybes, „Angular“ naudoja specialią skliaustų sintaksę.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { value:type = /* some value of type */; }
 innerHTML

Nešiok su manimi šį.

[property]atspindi domeno objekto modelio (DOM) elemento objekto mazgo ypatybę. Nepainiokite objekto ypatybių su DOM elemento atributais. Ypatybės ir atributai dažnai naudoja tą patį pavadinimą ir daro tą patį. Tačiau yra vienas aiškus skirtumas.

Atminkite, kad attr(atributai) yra viena pagrindinio DOM objekto ypatybė. Jis deklaruojamas DOM pavyzdžiu su atributų reikšmėmis, atitinkančiomis elemento apibrėžimą. Po to jis išlaiko tą pačią vertę. Kiekviena ypatybė turi savo rakto vertės lauką DOM objekto mazge. Šios savybės yra kintamasis post-instantiation.

Žinokite skirtumą tarp atributų ir savybių. Tai padės geriau suprasti, kaip kampinis susieja duomenis su savybėmis (savybių susiejimas). Kampinis vargu ar kada susies duomenis su elemento atributais. Išimtys yra labai retos. Paskutinį kartą: kampinis susieja komponentų duomenis su savybėmis, o ne su atributais!

Grįžtant prie pavyzdžio, [ … ]elemento nuosavybės priskyrimas turi ypatingą reikšmę. Skliausteliuose parodyta, kas propertyyra privaloma “value”užduoties dešinėje.

valueskliausteliuose taip pat turi ypatingą reikšmę. valuesavaime yra eilutės pažodinis. Kampinis jį nuskaito ir suderina jo vertę su komponentų klasės nariais. Kampinis pakeis atitinkančio nario atributo vertę. Tai, žinoma, reiškia tą pačią komponentų klasę, kurioje yra HTML šablonas.

Vienkryptis duomenų srautas iš komponento į šabloną baigtas. Narys, suderintas su teisingu skliaustuose esančio turto priskyrimu, suteikia value. Atkreipkite dėmesį, kad nario vertės pokyčiai komponentų klasėje persisunkia iki šablono. Tai yra „Angular“ pokyčių aptikimas darbe. Šablono srities pakeitimai neturi įtakos komponentų klasės nariui.

Raktų paėmimas: komponentų klasėje pateikiami duomenys, o šablone jie rodomi.

Nepavyko paminėti, kad duomenų vertės taip pat gali būti rodomos komponentuose innerHTML. Šis paskutinis pavyzdys įgyvendina dvigubas garbanotas petnešas. Kampinis atpažįsta šiuos petnešos ir interpoliuoja atitikmenis komponentų klasės duomenis į innerHTMLdiv.

 The value of the component class member ‘value’ is {{value}}. 

Renginių tvarkymas

Jei komponentas pateikia duomenis, tada šablonas teikia įvykius.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { handler(event):void { // function does stuff } }
// my.component.html innerHTML

Tai veikia panašiai kaip nuosavybės įrišimas.

Tai (event)susiję su bet kokiu galiojančiu įvykio tipu. Pavyzdžiui, vienas iš labiausiai paplitusių įvykių tipų yra click. Jis skleidžia, kai spusteli pelę. Nepaisant tipo, eventyra susietas su “handler”pavyzdžiu. Įvykių tvarkytojai paprastai yra komponentų klasės narės funkcijos.

( … )Yra ypatingą kampinis. Skliaustai nurodo, kad kampinis įvykis yra susietas su tinkamu handler. Pats įvykis kyla iš priimančiosios elemento.

Kai įvykis skleidžia, jis perduoda įvykio objektą formos pavidalu $event. handlerŽemėlapiai į tokio paties pavadinimo handlerfunkcija komponento klasei. Vienkryptis keitimasis iš įvykio susieto elemento į komponentų klasę yra baigtas.

Nors įmanoma, įvykių skleidimas iš tvarkytuvo neturi įtakos šablono elementui. Susiejimas vis dėlto yra vienakryptis.

Dvikryptis įrišimas

Įvesties formos yra puikus pavyzdys, kodėl būtina susieti dvikryptį ryšį. Dviejų krypčių duomenų susiejimas yra brangesnis nei įvykių ar ypatybių susiejimas.

Dviejų krypčių duomenų susiejimas turi savo modulį. Prieš pažvelgdami į tai, apsvarstykite šį pavyzdį.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { inputValue:string = ""; handler(event) { this.inputValue = event.target.value; } }

Laikas tai suskaidyti.

Šis pavyzdys sujungia ankstesnius du. Tai paaiškina, kodėl tai yra brangiau. Laikydamiesi logikos, tarkime, kad vartotojas įveda ką nors į įvesties elementą. Elementas skleidžia inputįvykį handleršablono komponentų klasei. Tvarkytojas priskiria klasės narį inputValueprie išleidžiamo įvykio vertės. Tai užbaigia renginių tvarkymą / įpareigojimą.

Dabar ant turto įrišimo. inputValueBuvo priskirtas naują vertę. Kadangi jis inputValueyra susietas su įvesties elementu value, jo duomenų pokytis perauga į įvesties elemento valueypatybę. Įvesties elementas valuesutampa su inputValue. Tai užbaigia turto įpareigojimą.

There you have it. Bidirectional data binding happens with both applications of unidirectional binding applied consecutively. The syntax is a bit messy though.

Thankfully, Angular provides NgModel to simplify the syntax. The below example is synonymous to the above.

// my.component.ts @Component({ templateUrl: ‘./my.component.html’ }) export class MyComponent { inputValue:string = ""; }

ngModel is a nice convenience. You have to import the FormsModule in your application’s root before using it. With that squared away, bidirectional data binding becomes much easier to work with.

To reinforce all you have learned, check out this picture from the official Angular Documentation1.

Duomenų srauto diagrama

You can visually summarize everything up until this point with this picture. Angular’s Documentation has plenty of other pictures worth seeing. This one should suffice given the scope of this article.

Component to Component

To bind data and events across different components, you must use the @Input and @Output decorators. Angular components are privately scoped. None of a component’s members are accessible from anywhere outside of its native view.

The @Input decorator indicates a member’s value is sourced from the parent function. This requires visualization to better understand.

Kodo pavyzdys

Notice the passing of the parent’s value member into the child’s property member. This would not be possible if property had no @Input decorator. The Angular compiler depends upon it.

Another example for @Output shows how an event travels from child to parent. Keep in mind that @Output almost always pertains to custom event bindings.

Kodo pavyzdys

Įsitikinkite, kad importuoti EventEmitter, @Inputir @Output@angular/common, jei jūs ketinate pakartoti vieną iš šių pavyzdžių.

Išvada

Tai gera vieta sustoti. Duomenų įrišimas apima daugybę naudojimo atvejų. Šią temą verta toliau nagrinėti „Angular“ svetainėje. Tai nėra vieninteliai būdai, kuriais galite manipuliuoti duomenimis „Angular“. Norėdami gauti daugiau informacijos, žr. Nuorodas, esančias skyriuje „Ištekliai“