Πώς να δημιουργήσετε προσαρμοσμένες οδηγίες στο Angular

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

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





MUO Το βίντεο της ημέρας ΚΥΛΙΣΤΕ ΓΙΑ ΝΑ ΣΥΝΕΧΙΣΕΤΕ ΜΕ ΠΕΡΙΕΧΟΜΕΝΟ

Τι είναι οι οδηγίες;

Οι οδηγίες είναι προσαρμοσμένοι κώδικες που χρησιμοποιεί το Angular για να τροποποιήσει τη συμπεριφορά ή την εμφάνιση ενός στοιχείου HTML. Μπορείτε να χρησιμοποιήσετε οδηγίες για να προσθέσετε προγράμματα ακρόασης συμβάντων, να αλλάξετε το DOM ή να εμφανίσετε ή να αποκρύψετε στοιχεία.



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





Οφέλη των οδηγιών

Ακολουθούν ορισμένα από τα οφέλη της χρήσης οδηγιών στο Angular:

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

Ρύθμιση της γωνιακής σας εφαρμογής

Για να ρυθμίσετε μια εφαρμογή Angular, εγκαταστήστε το Angular CLI εκτελώντας τον ακόλουθο κώδικα στο τερματικό σας:



 npm install -g @angular/cli

Μετά την εγκατάσταση του Angular CLI, δημιουργήστε ένα έργο Angular εκτελώντας την ακόλουθη εντολή:

 ng new custom-directives-app

Η εκτέλεση της παραπάνω εντολής θα δημιουργήσει ένα Angular έργο με όνομα προσαρμοσμένες οδηγίες-εφαρμογή .



Δημιουργία προσαρμοσμένης οδηγίας

Τώρα έχετε ένα έργο Angular και μπορείτε να ξεκινήσετε τη δημιουργία των προσαρμοσμένων οδηγιών σας. Δημιουργήστε ένα αρχείο TypeScript και ορίστε μια κλάση διακοσμημένη με το @Διευθυντικός διακοσμητής.

ο @Διευθυντικός Ο διακοσμητής είναι ένας διακοσμητής TypeScript που χρησιμοποιείται για τη δημιουργία προσαρμοσμένων οδηγιών. Τώρα δημιουργήστε ένα επισημάνω.οδηγία.τσ αρχείο στο src/app Ευρετήριο. Σε αυτό το αρχείο, θα δημιουργήσετε την προσαρμοσμένη οδηγία αποκορύφωμα .



Για παράδειγμα:

 import { Directive } from "@angular/core"; 
 
@Directive({ 
  selector: "[myHighlight]", 
}) 
export class HighlightDirective { 
  constructor() {} 
}

Το μπλοκ κώδικα παραπάνω εισάγει το Διευθυντικός διακοσμητής από το @γωνιακή/πυρήνα μονάδα μέτρησης. ο @Διευθυντικός διακοσμητής διακοσμεί το HighlightDirective τάξη. Παίρνει ένα αντικείμενο ως όρισμα με α εκλέκτορας ιδιοκτησία.

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

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης της οδηγίας στα πρότυπά σας:

τι είναι σφάλμα εισόδου/εξόδου συσκευής 
 <main> 
 <p myHighlight>Some text</p> 
</main>

Προσθήκη Συμπεριφοράς στην Οδηγία

Τώρα δημιουργήσατε με επιτυχία μια οδηγία. Το επόμενο βήμα είναι να προσθέσετε μια συμπεριφορά στην οδηγία ώστε να μπορεί να χειριστεί το DOM. Θα χρειαστείτε το ElementRef από το @angular/core για να προσθέσετε μια συμπεριφορά σε μια οδηγία.

Θα εισάγετε το ElementRef στον κατασκευαστή της οδηγίας. Το ElementRef είναι ένα περιτύλιγμα γύρω από ένα εγγενές στοιχείο μέσα σε μια προβολή.

Ακολουθεί ένα παράδειγμα για το πώς προσθέτετε μια συμπεριφορά σε μια οδηγία:

 import { Directive, ElementRef } from "@angular/core"; 
 
@Directive({ 
    selector: "[myHighlight]" 
}) 
export class HighlightDirective { 
    constructor(private element: ElementRef) { 
        this.element.nativeElement.style.backgroundColor = 'lightblue'; 
    } 
}

Σε αυτό το παράδειγμα, ο κατασκευαστής του HighlightDirective Η κλάση παίρνει μια παράμετρο ElementRef, την οποία το Angular εγχέει αυτόματα. Το ElementRef παρέχει πρόσβαση στο υποκείμενο στοιχείο DOM.

Χρησιμοποιώντας αυτό.στοιχείο.nativeElement ιδιοκτησία, έχετε πρόσβαση στο εγγενές στοιχείο DOM του στοιχείο παράμετρος. Στη συνέχεια, ορίζετε το χρώμα φόντου του στοιχείου σε γαλάζιο χρησιμοποιώντας την στυλ ιδιοκτησία. Αυτό σημαίνει ότι όποιο στοιχείο κι αν εφαρμόσετε το myHighlight οδηγία για θα έχει ανοιχτό μπλε φόντο.

Για να κάνετε την οδηγία λειτουργική, φροντίστε να την εισάγετε και να την δηλώσετε στο app.module.ts αρχείο.

Για παράδειγμα:

πώς να μεταδώσετε vlc στην τηλεόραση 
 import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { HighlightDirective } from './highlight.directive'; 
 
@NgModule({ 
  declarations: [ 
    AppComponent, 
    HighlightDirective, 
  ], 
  imports: [ 
    BrowserModule, 
    AppRoutingModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }

Τώρα μπορείτε να εφαρμόσετε την οδηγία myHighlight στα στοιχεία στα γωνιακά στοιχεία σας .

 <main> 
 <p myHighlight>Some text</p> 
</main>

Εκτελέστε την εφαρμογή σας στον διακομιστή ανάπτυξης για να ελέγξετε εάν η οδηγία είναι λειτουργική. Μπορείτε να το κάνετε αυτό εκτελώντας την ακόλουθη εντολή στο τερματικό σας:

 ng serve

Αφού εκτελέσετε την εντολή, μεταβείτε στο http://localhost:4200/ στο πρόγραμμα περιήγησής σας και θα δείτε μια διεπαφή που μοιάζει με την παρακάτω εικόνα.

στιγμιότυπο οθόνης της εφαρμογής custom-directives

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

Για να το κάνετε αυτό, αντικαταστήστε τον κωδικό στο επισημάνω.οδηγία.τσ αρχείο με αυτό:

 import { Directive, ElementRef, Input } from "@angular/core"; 
 
@Directive({ 
    selector: "[myHighlight]" 
}) 
 
export class HighlightDirective { 
    @Input() set myHighlight(color: string) { 
        this.element.nativeElement.style.backgroundColor = color; 
    } 
 
    constructor(private element: ElementRef) {  
    } 
}

Στο μπλοκ κώδικα παραπάνω, το HighlightDirective Η κλάση περιέχει μια μέθοδο setter που ονομάζεται myHighlight . Αυτή η μέθοδος απαιτεί α χρώμα παράμετρος της συμβολοσειράς τύπου. Διακοσμείτε τη μέθοδο σέτερ με το @Εισαγωγή διακοσμητής, που σας επιτρέπει να μεταφέρετε την τιμή χρώματος στην οδηγία από το μητρικό στοιχείο.

Τώρα μπορείτε να προσδιορίσετε το χρώμα φόντου περνώντας μια τιμή στην οδηγία myHighlight.

Για παράδειγμα:

 <main> 
 <p myHighlight='pink'>Some text</p> 
</main>

Δημιουργία προσαρμοσμένης διαρθρωτικής οδηγίας

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

Η Angular παρέχει δύο δομικές οδηγίες, ngΓια και GIF . Η οδηγία ngFor αποδίδει ένα πρότυπο για κάθε στοιχείο σε μια συλλογή (πίνακας), ενώ το GIF χειρίζεται την υπό όρους απόδοση.

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

Στο όρος.οδηγία.τσ αρχείο, γράψτε αυτόν τον κώδικα:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core' 
 
@Directive({ 
    selector: "[condition]" 
}) 
 
export class ConditionDirective { 
 
    @Input() set condition(arg: boolean) { 
        if(arg) { 
            this.viewContainer.createEmbeddedView(this.template) 
        } else { 
            this.viewContainer.clear(); 
        } 
    } 
 
    constructor( 
 private template: TemplateRef<unknown>,  
 private viewContainer: ViewContainerRef  
 ) {} 
}

Αυτό το μπλοκ κώδικα σάς επιτρέπει να αποδώσετε στοιχεία υπό όρους εφαρμόζοντας το κατάσταση οδηγία σε ένα στοιχείο και μεταβίβαση μιας boolean τιμής από το γονικό στοιχείο.

τι να κανεις με παλιο κριαρι

Στον κατασκευαστή του ConditionDirective τάξη, εισάγετε ένα παράδειγμα του TemplateRef και ViewContainerRef . Το TemplateRef αντιπροσωπεύει το πρότυπο που σχετίζεται με την οδηγία και το ViewContainerRef αντιπροσωπεύει το κοντέινερ όπου η εφαρμογή αποδίδει τις προβολές.

Η μέθοδος ρυθμιστή κλάσης ConditionDirective χρησιμοποιεί μια δήλωση if else για να ελέγξει την παράμετρο arg. Η οδηγία δημιουργεί μια ενσωματωμένη προβολή χρησιμοποιώντας το παρεχόμενο πρότυπο εάν η παράμετρος είναι αληθής. ο createEmbeddedView μέθοδος της κλάσης ViewContainerRef δημιουργεί και αποδίδει την προβολή στο DOM.

Εάν η παράμετρος είναι ψευδής , η οδηγία καθαρίζει το κοντέινερ προβολής χρησιμοποιώντας το Σαφή μέθοδο της κλάσης ViewContainerRef. Αυτό αφαιρεί τυχόν προβολές που έχουν αποδοθεί στο παρελθόν από το DOM.

Αφού δημιουργήσετε την οδηγία, καταχωρίστε την στο έργο σας εισάγοντας και δηλώνοντάς την στο app.module.ts αρχείο. Αφού το κάνετε αυτό, μπορείτε να αρχίσετε να χρησιμοποιείτε την οδηγία στα πρότυπά σας.

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του στα πρότυπά σας:

 <main> 
 <p *condition="true">Hello There!!!</p> 
</main>

Τώρα μπορείτε να δημιουργήσετε προσαρμοσμένες οδηγίες

Οι προσαρμοσμένες οδηγίες στο Angular παρέχουν έναν ισχυρό τρόπο χειρισμού του DOM και προσθήκης δυναμικής συμπεριφοράς στα πρότυπά σας. Έχετε μάθει πώς να δημιουργείτε και να εφαρμόζετε προσαρμοσμένα χαρακτηριστικά και δομικές οδηγίες στις Angular εφαρμογές σας. Κατανοώντας πώς να δημιουργείτε και να χρησιμοποιείτε προσαρμοσμένες οδηγίες, μπορείτε να επωφεληθείτε πλήρως από τις δυνατότητες του Angular.