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

από
Tweet
Share
Share
Pin

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

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

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

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

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

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

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

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

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

 npm install -g @angular/cli

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

 ng new custom-directives-app

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

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

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

  Η κυριαρχία του Cloud και η σημασία του στο Cloud Computing

Το @Directive decorator είναι ένας διακοσμητής TypeScript που χρησιμοποιείται για τη δημιουργία προσαρμοσμένων οδηγιών. Τώρα δημιουργήστε ένα αρχείο highlight.directive.ts στον κατάλογο src/app. Σε αυτό το αρχείο, θα δημιουργήσετε την επισήμανση προσαρμοσμένης οδηγίας.

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

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

Το μπλοκ κώδικα παραπάνω εισάγει το διακοσμητή Οδηγίας από τη μονάδα @angular/core. Ο διακοσμητής @Directive διακοσμεί την κατηγορία 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.

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

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

  Τα 10 καλύτερα εργαλεία Scrum για μια νεοσύστατη έως μεσαία επιχείρηση

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

 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 στα στοιχεία στα στοιχεία Angular σας.

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

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

 ng serve

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

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

Για να το κάνετε αυτό, αντικαταστήστε τον κώδικα στο αρχείο highlight.directive.ts με αυτό:

 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 περιέχει μια μέθοδο ρυθμιστή που ονομάζεται myHighlight. Αυτή η μέθοδος παίρνει μια παράμετρο χρώματος της συμβολοσειράς τύπου. Διακοσμείτε τη μέθοδο setter με τον διακοσμητή @Input, επιτρέποντάς σας να μεταβιβάσετε την τιμή χρώματος στην οδηγία από το γονικό στοιχείο.

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

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

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

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

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

  Πώς να εγγραφείτε για μια κάρτα βιβλιοθήκης από το σπίτι

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

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

Στο αρχείο condition.directive.ts, γράψτε αυτόν τον κώδικα:

 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.