Adatkötés szögben magyarázva

Kötelező adatok

Motiváció

Az adatok gyakran meghatározzák az alkalmazás megjelenését. Ezen adatok felhasználói felületre történő értelmezése magában foglalja az osztálylogikát ( .component.ts) és a sablonnézetet ( .component.html). A szögletes adatkötés révén köti össze őket. Gondoljon az adatkötésre, mint az összetevői interakció eszközére.

Komponens és sablon

Az alkatrész logikájának és adatainak nagy részét osztályán belül díszíti @Component. Ez a dekoratőr az osztályt mint sablont HTML-ként határozza meg. A komponens sablonja az alkalmazáson belüli osztályt képviseli. A hangsúlynak az összetevő osztálya és a HTML sablon között kell lennie.

Itt történik az adatkötés. Az elem tulajdonságai és eseményei hozzárendelt értékeket kapnak. Ezek az alkatrészosztály által meghatározott értékek a két szerep egyikét szolgálják. Az egyik olyan adatok előállítása, amelyeket a sablon megkap. A másik kezeli a sablon elem által kibocsátott eseményeket.

Kódpélda

Próbálja meg ezt a képet a következő szakasz mentális modelljeként használni.

Kötés irányai

Az adatok megkötésének kétféle módja van: egyirányú és kétirányú. Az Angular technikailag csak egyirányú adatáramlást használ. A kétirányú áramlás végül egyirányú. Két egyirányú áramlású alkalmazásban történik, irányonként egyszer. Erről később.

Az egyirányú áramlás meghatározza az egyirányú interakciót. Vagy a komponens küld adatokat a sablonba, vagy a sablon eseményt bocsát ki az összetevő logikájába. A sablon hatókörén belüli adatváltozások nem szivárognak át az összetevő osztályba. Az eseménykibocsátó egyirányú tranzakció, amely a sablon elemeiből indul.

A kétirányú alkotja mindkét irányt. Ez azt jelenti, hogy az osztálylogika vagy a sablon HTML adatainak változása folytatódik egymás között. A változtatások hatóköre az összetevő nézete. A nézet az összetevő osztályát és sablonját együttesen tartalmazza.

Elem tulajdonságai

Az adathoz kötött elem tulajdonságainak felismeréséhez az Angular egy speciális zárójeles szintaxist használ.

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

Vigyél velem ezen.

[property]tükrözi a tulajdonságot a Domain Object Model (DOM) elem objektumcsomópontjában. Ne keverje össze az objektum tulajdonságait egy DOM elem attribútumaival. A tulajdonságok és attribútumok gyakran ugyanazt a nevet használják, és ugyanazt csinálják. Van azonban egy világos megkülönböztetés.

Ne feledje, hogy az attr(attribútumok) az alapul szolgáló DOM objektum egyetlen tulajdonsága. A DOM példányosításakor deklarálódik az elem definíciójának megfelelő attribútumértékekkel. Ezt követően ugyanazt az értéket tartja fenn. A tulajdonságoknak mindegyiküknek megvan a saját kulcsérték mezője egy DOM objektum csomópontban. Ezek a tulajdonságok az utánpótlás utáni mutáció.

Ismerje a különbséget az attribútumok és a tulajdonságok között. Annak jobb megértéséhez vezet, hogy az Angular hogyan köti az adatokat a tulajdonságokhoz (tulajdonság-kötés). A szögletes alig fog valaha is adatokat kötni egy elem attribútumához. Kivételek ez alól nagyon ritkák. Utoljára: Az Angular összetevők adatait tulajdonságokhoz köti, nem attribútumokhoz!

Visszatérve a példára, [ … ]az elem tulajdonság-hozzárendelésének különleges jelentése van. A zárójelben látható, hogy a feladat jobb oldalán propertyvan kötve “value”.

valuea zárójelek összefüggésében is különleges jelentéssel bír. valueönmagában egy húr literál. A Angular leolvassa és összeveti értékét a komponens osztály tagjaival. Az Angular helyettesíti az egyező tag attribútum értékét. Ez természetesen ugyanarra az összetevő osztályra vonatkozik, amely a HTML sablont tárolja.

Az adatok egyirányú áramlása komponensről sablonra befejeződött. A zárójelben lévő tulajdonság jobb hozzárendelésével egyeztetett tag biztosítja a value. Ne feledje, hogy a tag értékének változásai a komponensosztályban a sablonig erõsödnek. Ez az Angular változás észlelése a munkahelyen. A sablon hatókörén belüli változások nincsenek hatással az összetevő osztály tagjára.

Key take-away: a komponens osztály adja meg az adatokat, míg a sablon megjeleníti azokat.

Nem említettem, hogy az adatértékek egy komponensben is megjelenhetnek innerHTML. Ez az utolsó példa kettős göndör zárójelet alkalmaz. A Angular felismeri ezeket a zárójeleket és interpolálja a megfelelő komponensosztály adatait innerHTMLa div.

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

Eseménykezelés

Ha az összetevő adatokat szolgáltat, akkor a sablon eseményeket szolgáltat.

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

Ez hasonlóan működik, mint a tulajdonkötés.

Az (event)tárgya érvényes esemény típusát. Például az egyik leggyakoribb eseménytípus az click. Akkor bocsát ki, amikor rákattint az egérre. Típustól függetlenül a példában meg eventvan kötve “handler”. Az eseménykezelők általában a komponensosztály tagfüggvényei.

A ( … )szögletesek különlegesek. A zárójelek megmondják, hogy a szögletes események a megfelelő hozzárendeléshez vannak kötve handler. Maga az esemény a host elemből származik.

Amikor az esemény kibocsájt, akkor az esemény objektumot adja át a formájában $event. A handlerleképezés handlera komponensosztály azonos elnevezésű függvényére történik. Az eseményhez kötött elemtől az összetevő osztályig végzett egyirányú váltás teljes.

Az események kibocsátása a kezelőből, bár lehetséges, nem befolyásolja a sablon elemet. A kötés végül is egyirányú.

Kétirányú kötés

A beviteli űrlapok nagyszerű példát mutatnak arra, hogy miért szükséges a kétirányú kötés. A kétirányú adatkötések költségesebbek, mint az események vagy tulajdonságok.

Bidirectional data binding has its own module. Before taking a look at that, consider the following example.

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

Time to break this down.

This example combines the previous two. That explains why it is more costly. Following the logic, assume the user types something into the input element. The element emits an input event to the handler of the template’s component class. The handler assigns the class member inputValue to the value of the emitted event. This concludes the event handling/binding.

Now onto the property binding. The inputValue was assigned a new value. Since inputValue is bound to the input element’s value, its change in data percolates down into the input element’s value property. The input element’s value matches up with inputValue. This concludes the property binding.

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.

Adatfolyam-diagram

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.

Kódpélda

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.

Kódpélda

Győződjön meg róla, hogy importálja a EventEmitter(z) @Input, és @Outputa (z) @angular/commonoldalt, ha meg kívánja ismételni az egyik példát.

Következtetés

Ez egy jó hely a megállásra. Az adatkötés felhasználási esetek széles skáláját öleli fel. Ezt a témát érdemes tovább vizsgálni az Angular weboldalán. Nem csak így lehet manipulálni az adatokat szögben. További információkért lásd az Erőforrások linkeket.