Πώς να χρησιμοποιήσετε το Output Decorator στο Angular

Στο Angular, μια ιστοσελίδα μπορεί να περιέχει πολλά διαφορετικά επαναχρησιμοποιήσιμα στοιχεία. Κάθε στοιχείο συνήθως περιέχει τη δική του λογική TypeScript, πρότυπο HTML και στυλ CSS.

Μπορείτε επίσης να επαναχρησιμοποιήσετε εξαρτήματα μέσα σε άλλα εξαρτήματα. Σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε τον διακοσμητή εξόδου για να στείλετε πληροφορίες από ένα θυγατρικό στοιχείο πίσω στο μητρικό του στοιχείο.

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

Πώς να προσθέσετε τον διακοσμητή εξόδου σε ένα παιδικό στοιχείο

Αρχικά, θα χρειαστεί να δημιουργήσετε μια νέα εφαρμογή Angular με ένα γονικό στοιχείο και ένα θυγατρικό στοιχείο.

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

1. Δημιούργησε ένα νέο Γωνιακή εφαρμογή. Από προεπιλογή, "app" είναι το όνομα του ριζικού στοιχείου. Αυτό το στοιχείο περιλαμβάνει τρία κύρια αρχεία: "app.component.html", "app.component.css" και "app.component.ts".
2. Για αυτό το παράδειγμα, το στοιχείο "εφαρμογή" θα λειτουργεί ως γονικό στοιχείο. Αντικαταστήστε όλο το περιεχόμενο στο "app.component.html" με το εξής:

   <divτάξη="γονέας-συστατικό">
   <h1> Αυτό είναι το μητρικό στοιχείο h1>
   div>

3. Προσθέστε κάποιο στυλ στο στοιχείο γονικής εφαρμογής στο "app.component.css":

   .γονέας-συστατικό {
   γραμματοσειρά-οικογένεια: Arial, Helvetica, Σανς σέριφ;
   χρώμα του φόντου: φωτοκοράλ;
   υλικό παραγεμίσματος: 20px
   }

4. Χρησιμοποιήστε την εντολή "ng generate component" για να δημιουργήστε ένα νέο στοιχείο Angular που ονομάζεται "στοιχείο δεδομένων". Σε αυτό το παράδειγμα, το "data-component" θα αντιπροσωπεύει το θυγατρικό στοιχείο.

   ng g c στοιχείο δεδομένων

5. Προσθέστε περιεχόμενο στο θυγατρικό στοιχείο στο "data-component.component.html". Αντικαταστήστε το τρέχον περιεχόμενο για να προσθέσετε ένα νέο κουμπί. Συνδέστε το κουμπί σε μια λειτουργία που θα εκτελείται όταν ο χρήστης κάνει κλικ σε αυτό:

   <divτάξη="παιδί-συστατικό">
   <Π> Αυτό είναι το παιδί συστατικό Π>
   <κουμπί (Κάντε κλικ)="onButtonClick()">Κάντε κλικ μεκουμπί>
   div>

6. Προσθέστε κάποιο στυλ στο θυγατρικό στοιχείο στο "data-component.component.css":

   .παιδί-συστατικό {
   γραμματοσειρά-οικογένεια: Arial, Helvetica, Σανς σέριφ;
   χρώμα του φόντου: γαλάζιο;
   περιθώριο: 20px;
   υλικό παραγεμίσματος: 20px
   }

7. Προσθέστε τη συνάρτηση onButtonClick() στο αρχείο TypeScript για το στοιχείο, στο "data-component.component.ts":

   onButtonClick() {
   }

8. Ακόμα μέσα στο αρχείο TypeScript, προσθέστε τα "Output" και "EventEmitter" στη λίστα εισαγωγών:

   εισαγωγή { Component, Output, EventEmitter, OnInit } από'@angular/core';

9. Μέσα στην κλάση DataComponentComponent, δηλώστε μια μεταβλητή Output για το στοιχείο που ονομάζεται "buttonWasClicked". Αυτό θα είναι ένα EventEmitter. Ένας EventEmitter είναι μια ενσωματωμένη κλάση που σας επιτρέπει να ενημερώνετε ένα άλλο στοιχείο όταν συμβαίνει ένα συμβάν.

   εξαγωγήτάξη DataComponentComponent υλοποιεί OnInit {
   @ΠαραγωγήΚουμπί ()Έγινε κλικ = νέος EventEmitter<κενός>();
   // ...
   }

10. Χρησιμοποιήστε τον πομπό συμβάντων "buttonWasClicked" μέσα στη συνάρτηση onButtonClick(). Όταν ο χρήστης κάνει κλικ στο κουμπί, το στοιχείο δεδομένων θα στείλει αυτό το συμβάν στο στοιχείο γονικής εφαρμογής.

    onButtonClick() {
    Αυτό.buttonWasClicked.emit();
    }

Τρόπος ακρόασης συμβάντων στο στοιχείο Child από το γονικό στοιχείο

Για να χρησιμοποιήσετε την ιδιότητα Output του θυγατρικού στοιχείου, θα χρειαστεί να ακούσετε το συμβάν που εκπέμπεται από το γονικό στοιχείο.

1. Χρησιμοποιήστε το θυγατρικό στοιχείο μέσα στο "app.component.html". Μπορείτε να προσθέσετε την έξοδο "buttonWasClicked" ως ιδιότητα κατά τη δημιουργία της ετικέτας HTML. Συνδέστε το συμβάν σε μια νέα λειτουργία.

   <app-data-component (κουμπίΈγινε κλικ)="buttonInChildComponentWasClicked()">app-data-component>

2. Μέσα στο "app.component.ts", προσθέστε τη νέα λειτουργία για να χειριστείτε το συμβάν κλικ κουμπιού όταν εμφανίζεται στο θυγατρικό στοιχείο. Δημιουργήστε ένα μήνυμα όταν ο χρήστης κάνει κλικ στο κουμπί.

   μήνυμα: σειρά = ""
   buttonInChildComponentWasClicked() {
   Αυτό.μήνυμα = "Έγινε κλικ στο κουμπί στο θυγατρικό στοιχείο";
   }

3. Εμφανίστε το μήνυμα στο "app.component.html":

   <Π>{{μήνυμα}}Π>

4. Πληκτρολογήστε την εντολή "ng serve" σε ένα τερματικό για να εκτελέσετε την εφαρμογή Angular. Ανοίξτε το σε ένα πρόγραμμα περιήγησης ιστού στο localhost: 4200. Τα στοιχεία γονέα και παιδιού χρησιμοποιούν διαφορετικά χρώματα φόντου για να διευκολύνουν τη διάκρισή τους.
5. Κάνε κλικ στο Κάντε κλικ με κουμπί. Το θυγατρικό στοιχείο θα στείλει το συμβάν στο γονικό στοιχείο, το οποίο θα εμφανίσει το μήνυμα.

Πώς να στείλετε δεδομένα από ένα θυγατρικό στοιχείο σε ένα γονικό στοιχείο

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

1. Στο "data-component.component.ts", προσθέστε μια μεταβλητή για να αποθηκεύσετε μια λίστα συμβολοσειρών που περιέχει ορισμένα δεδομένα.

   listOfPeople: σειρά[] = ['Τζόι', 'Γιάννης', 'Τζέιμς'];

2. Τροποποιήστε τον τύπο επιστροφής του buttonWasClicked εκπομπής συμβάντος. Αλλάξτε το από void σε συμβολοσειρά[], για να ταιριάζει με τη λίστα συμβολοσειρών που δηλώσατε στο προηγούμενο βήμα:

   @ΠαραγωγήΚουμπί ()Έγινε κλικ = νέος EventEmitter<σειρά[]>();

3. Τροποποιήστε τη συνάρτηση onButtonClick(). Κατά την αποστολή του συμβάντος στο γονικό στοιχείο, προσθέστε τα δεδομένα ως όρισμα στη συνάρτηση emit():

   onButtonClick() {
   Αυτό.buttonWasClicked.emit(Αυτό.listOfPeople);
   }

4. Στο "app.component.html", τροποποιήστε την ετικέτα "app-data-component". Προσθέστε το "$event" στη συνάρτηση buttonInChildComponentWasClicked(). Αυτό περιέχει τα δεδομένα που αποστέλλονται από το θυγατρικό στοιχείο.

   <app-data-component (κουμπίΈγινε κλικ)="buttonInChildComponentWasClicked($event)">app-data-component>

5. Ενημερώστε τη συνάρτηση στο "app.component.ts" για να προσθέσετε την παράμετρο για τα δεδομένα:

   buttonInChildComponentWasClick (δεδομέναFromChild: σειρά[]) {
   Αυτό.μήνυμα = "Έγινε κλικ στο κουμπί στο θυγατρικό στοιχείο";
   }

6. Προσθέστε μια νέα μεταβλητή που ονομάζεται "data" για να αποθηκεύσετε τα δεδομένα που προέρχονται από το θυγατρικό στοιχείο:

   μήνυμα: σειρά = ""
   δεδομένα: σειρά[] = []
   buttonInChildComponentWasClick (δεδομέναFromChild: σειρά[]) {
   Αυτό.μήνυμα = "Έγινε κλικ στο κουμπί στο θυγατρικό στοιχείο";
   Αυτό.data = dataFromChild;
   }

7. Εμφάνιση των δεδομένων στη σελίδα HTML:

   <Π>{{data.join(', ')}}Π>

8. Πληκτρολογήστε την εντολή "ng serve" σε ένα τερματικό για να εκτελέσετε την εφαρμογή Angular. Ανοίξτε το σε ένα πρόγραμμα περιήγησης ιστού στο localhost: 4200.
9. Κάνε κλικ στο Κάντε κλικ με κουμπί. Το θυγατρικό στοιχείο θα στείλει τα δεδομένα από το θυγατρικό στοιχείο στο γονικό στοιχείο.

Αποστολή δεδομένων σε άλλα εξαρτήματα με χρήση του διακοσμητή εξόδου

Υπάρχουν και άλλα διακοσμητικά που μπορείτε να χρησιμοποιήσετε στο Angular, όπως το Input decorator ή το Component decorator. Μπορείτε να μάθετε περισσότερα για το πώς μπορείτε να χρησιμοποιήσετε άλλους διακοσμητές στο Angular για να απλοποιήσετε τον κώδικά σας.