Δεσμευτικά δεδομένα σε γωνιακή εξήγηση

Δεσμευτική δεδομένων

Κίνητρο

Τα δεδομένα συχνά ορίζουν την εμφάνιση μιας εφαρμογής. Η ερμηνεία αυτών των δεδομένων στη διεπαφή χρήστη περιλαμβάνει λογική κλάσης ( .component.ts) και προβολή προτύπου ( .component.html). Η γωνιακή σύνδεση τους συνδέει μέσω δέσμευσης δεδομένων. Σκεφτείτε τη δέσμευση δεδομένων ως εργαλείο αλληλεπίδρασης συστατικών.

Στοιχείο και πρότυπο

Το στοιχείο αποθηκεύει το μεγαλύτερο μέρος της λογικής και των δεδομένων του μέσα στην τάξη του διακοσμημένο με @Component. Αυτός ο διακοσμητής ορίζει την τάξη ως στοιχείο με HTML πρότυπο. Το πρότυπο του στοιχείου αντιπροσωπεύει την κλάση εντός της εφαρμογής. Η εστίαση εδώ πρέπει να βρίσκεται μεταξύ της κλάσης του στοιχείου και του προτύπου HTML.

Εδώ συμβαίνει η δέσμευση δεδομένων. Οι ιδιότητες του στοιχείου και τα συμβάντα λαμβάνουν εκχωρημένες τιμές. Αυτές οι τιμές, που ορίζονται από την κλάση συστατικών, εξυπηρετούν έναν από τους δύο ρόλους. Το ένα είναι να παράγει δεδομένα που στη συνέχεια λαμβάνει το πρότυπο. Οι άλλοι χειρίζονται συμβάντα που εκπέμπονται από το στοιχείο προτύπου.

Παράδειγμα κώδικα

Προσπαθήστε να χρησιμοποιήσετε αυτήν την εικόνα ως διανοητικό μοντέλο για την επόμενη ενότητα.

Οδηγίες για τη δέσμευση

Υπάρχουν δύο τρόποι με τους οποίους τα δεδομένα δεσμεύονται: μονοκατευθυντική και αμφίδρομη. Η γωνιακή τεχνική χρησιμοποιεί μόνο μονόδρομη ροή δεδομένων. Η αμφίδρομη ροή είναι τελικά μονοκατευθυντική. Συμβαίνει σε δύο εφαρμογές μονοκατευθυντικής ροής, μία φορά για κάθε κατεύθυνση. Περισσότερα για αυτό αργότερα.

Η μονοκατευθυντική ροή καθορίζει τη μονόδρομη αλληλεπίδραση. Είτε το στοιχείο αποστέλλει δεδομένα στο πρότυπο είτε το πρότυπο εκπέμπει ένα συμβάν στη λογική των στοιχείων. Οι αλλαγές δεδομένων εντός του πεδίου εφαρμογής του προτύπου δεν διέρχονται στην κλάση στοιχείων. Η εκπομπή συμβάντων είναι μια μονόδρομη συναλλαγή που ξεκινά από τα στοιχεία του προτύπου.

Η αμφίδρομη αποτελεί και τις δύο κατευθύνσεις. Αυτό σημαίνει ότι οι αλλαγές στα δεδομένα της λογικής τάξης ή του προτύπου HTML παραμένουν μεταξύ τους. Το εύρος των αλλαγών είναι η προβολή του στοιχείου. Η προβολή περιλαμβάνει την κλάση και το πρότυπο του στοιχείου μαζί.

Ιδιότητες στοιχείου

Για την αναγνώριση ιδιοτήτων στοιχείων που δεσμεύονται από δεδομένα, η Angular χρησιμοποιεί μια ειδική σύνταξη αγκύλης.

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

Φέρτε μαζί μου σε αυτό.

[property]αντικατοπτρίζει την ιδιότητα στον κόμβο αντικειμένου του στοιχείου Domain Model (DOM). Μην συγχέετε τις ιδιότητες αντικειμένου με τα χαρακτηριστικά ενός στοιχείου DOM. Οι ιδιότητες και τα χαρακτηριστικά μοιράζονται συχνά το ίδιο όνομα και κάνουν το ίδιο πράγμα. Υπάρχει όμως μια σαφής διάκριση.

Να θυμάστε ότι attr(χαρακτηριστικά) είναι μια μεμονωμένη ιδιότητα του υποκείμενου αντικειμένου DOM. Δηλώνεται με το DOM's instantiation με τιμές χαρακτηριστικών που αντιστοιχούν στον ορισμό του στοιχείου. Διατηρεί την ίδια τιμή μετά από αυτό. Κάθε ιδιοκτησία έχει το δικό της πεδίο κλειδιού-τιμής σε έναν κόμβο αντικειμένου DOM. Αυτές οι ιδιότητες είναι μεταβλητές μετά την εμφάνιση.

Μάθετε τη διαφορά μεταξύ χαρακτηριστικών και ιδιοτήτων. Θα οδηγήσει σε καλύτερη κατανόηση του τρόπου με τον οποίο η γωνιακή δέσμευση δεδομένων σε ιδιότητες (δεσμευτική ιδιότητα). Το Angular δεν θα συνδέσει ποτέ δεδομένα με τα χαρακτηριστικά ενός στοιχείου. Οι εξαιρέσεις σε αυτό είναι πολύ σπάνιες. Μια τελευταία φορά: Η γωνιακή δέσμευση των στοιχείων των στοιχείων σε ιδιότητες, όχι σε χαρακτηριστικά!

Αναφερόμενοι στο παράδειγμα, η [ … ]εκχώρηση ιδιότητας του στοιχείου έχει ιδιαίτερη σημασία. Οι αγκύλες δείχνουν ότι propertyείναι συνδεδεμένο στα “value”δεξιά της εργασίας.

valueέχει επίσης ιδιαίτερη σημασία στο πλαίσιο των αγκυλών. valueαπό μόνη της είναι μια κυριολεκτική συμβολοσειρά. Το Angular το διαβάζει και ταιριάζει με την αξία του έναντι των μελών της κατηγορίας συστατικών. Το Angular θα αντικαταστήσει την τιμή του αντίστοιχου χαρακτηριστικού μέλους. Αυτό φυσικά αναφέρεται στην ίδια κλάση συστατικών που φιλοξενεί το πρότυπο HTML.

Η μονόδρομη ροή δεδομένων από στοιχείο σε πρότυπο είναι πλήρης. Το μέλος ταιριάζει με τη σωστή εκχώρηση της αγκύλης ιδιοκτησίας παρέχει το value. Σημειώστε ότι αλλάζει η τιμή του μέλους στην κλάση συστατικών που διεισδύει στο πρότυπο. Αυτή είναι η ανίχνευση αλλαγών της Angular στην εργασία. Οι αλλαγές εντός του πεδίου εφαρμογής του προτύπου δεν επηρεάζουν το μέλος κλάσης συστατικών.

Αφαίρεση κλειδιού: η κλάση συστατικών παρέχει τα δεδομένα ενώ το πρότυπο τα εμφανίζει.

Δεν μπόρεσα να αναφέρω ότι οι τιμές δεδομένων μπορούν επίσης να εμφανιστούν σε ένα στοιχείο innerHTML. Αυτό το τελευταίο παράδειγμα εφαρμόζει διπλά σγουρά στηρίγματα. Γωνιακή αναγνωρίζει αυτά τα σιδεράκια και παρεμβολή των δεδομένων συστατικό της κατηγορίας που ταιριάζουν σε η innerHTMLτου div.

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

Χειρισμός εκδηλώσεων

Εάν το στοιχείο παρέχει δεδομένα, τότε το πρότυπο παρέχει συμβάντα.

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

Αυτό λειτουργεί παρόμοια με τη δέσμευση ιδιοκτησίας.

Οι (event)αφορά σε καμία έγκυρη τύπο συμβάντος. Για παράδειγμα, ένας από τους πιο συνηθισμένους τύπους συμβάντων είναι click. Εκπέμπει όταν κάνετε κλικ στο ποντίκι σας. Ανεξάρτητα από τον τύπο, eventδεσμεύεται “handler”στο παράδειγμα. Οι διαχειριστές συμβάντων είναι συνήθως λειτουργίες μέλους της κλάσης συστατικών.

Η ( … )είναι ειδικά για γωνιακή. Parenthesis tell Angular ένα γεγονός συνδέεται με τη σωστή εκχώρηση του handler. Το ίδιο το γεγονός προέρχεται από το στοιχείο κεντρικού υπολογιστή.

Όταν το συμβάν εκπέμπει, περνά το αντικείμενο συμβάντος με τη μορφή $event. Οι handlerχάρτες στην ίδια ονομασία handlerσυνάρτηση της κλάσης συστατικών Η μονοκατευθυνόμενη ανταλλαγή από το στοιχείο δεσμευμένου συμβάντος στην κλάση συστατικών έχει ολοκληρωθεί.

Η εκπομπή συμβάντων από τον χειριστή, ενώ είναι δυνατόν, δεν επηρεάζει το στοιχείο προτύπου. Η δέσμευση είναι μονόδρομη.

Αμφίδρομη σύνδεση

Οι φόρμες εισαγωγής παρέχουν ένα εξαιρετικό παράδειγμα του γιατί είναι απαραίτητη η αμφίδρομη σύνδεση Οι δεσμεύσεις δεδομένων δύο κατευθύνσεων είναι πιο δαπανηρές από τις δεσμεύσεις συμβάντων ή ιδιοτήτων.

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.

Διάγραμμα ροής δεδομένων

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.

Παράδειγμα κώδικα

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.

Παράδειγμα κώδικα

Βεβαιωθείτε ότι έχετε εισάγει EventEmitter, @Inputκαι @Outputαπό το @angular/commonαν σκοπεύετε να αναπαράγουν ένα από αυτά τα παραδείγματα.

συμπέρασμα

Αυτό είναι ένα καλό μέρος για να σταματήσετε. Η δέσμευση δεδομένων καλύπτει ένα ευρύ φάσμα περιπτώσεων χρήσης. Αυτό το θέμα αξίζει να εξερευνήσετε περαιτέρω στον ιστότοπο της Angular. Αυτοί δεν είναι οι μόνοι τρόποι με τους οποίους μπορείτε να χειριστείτε δεδομένα στο Angular. Δείτε τους συνδέσμους στην ενότητα Πόροι για περισσότερες πληροφορίες.