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

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

Τι είναι η γωνιακή οδηγία;

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

Από τη βασική ιδέα, οι γωνιακές οδηγίες κατηγοριοποιούνται σε τρεις κατηγορίες.

  1. Οδηγίες χαρακτηριστικών
  2. Διαρθρωτικές οδηγίες
  3. Συστατικά

Οδηγίες χαρακτηριστικών

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

Διαρθρωτικές οδηγίες

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

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

Συστατικά

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

Χρήση γωνιακών ενσωματωμένων οδηγιών

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

Η οδηγία NgStyle είναι μια οδηγία χαρακτηριστικών που χρησιμοποιείται για να αλλάξει το στυλ οποιουδήποτε στοιχείου DOM με βάση κάποια συνθήκη.

I am an Attribute Directive

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

Η οδηγία NgIf είναι μια δομική οδηγία που χρησιμοποιείται για την προσθήκη στοιχείων στο DOM σύμφωνα με κάποια προϋπόθεση.

I am a Structural Directive

Στο παραπάνω απόσπασμα κώδικα, ολόκληρη η παράγραφος θα παραμείνει στο DOM εάν η τιμή της showμεταβλητής είναι αλήθεια, αλλιώς θα ξεκινήσει από το DOM.

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

Η δημιουργία μιας προσαρμοσμένης οδηγίας είναι ακριβώς όπως η δημιουργία ενός γωνιακού στοιχείου. Για να δημιουργήσουμε μια προσαρμοσμένη οδηγία πρέπει να αντικαταστήσουμε τον @Componentδιακοσμητή με τον @Directiveδιακοσμητή.

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

Δημιουργήστε ένα app-highlight.directive.tsαρχείο σε src/appφάκελο και προσθέστε το απόσπασμα κώδικα παρακάτω.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

Εδώ εισάγουμε Directiveκαι ElementRefαπό τον γωνιακό πυρήνα Η Directiveπαρέχει τη λειτουργικότητα του @Directiveδιακοσμητή με τον οποίο παρέχουμε επιλογέα περιουσία του για να appHighLightέτσι ώστε να μπορούμε να χρησιμοποιήσουμε αυτό το επιλογέας οπουδήποτε στην εφαρμογή. Εισάγουμε επίσης το ElementRefοποίο είναι υπεύθυνο για την πρόσβαση στο στοιχείο DOM.

Τώρα για να λειτουργήσει η appHighlightΟδηγία, πρέπει να προσθέσουμε την Οδηγία μας στον πίνακα δηλώσεων στο app.module.tsαρχείο.

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Τώρα πρόκειται να χρησιμοποιήσουμε τη νέα προσαρμοσμένη οδηγία. Προσθέτω την appHightlightοδηγία στο, app.component.htmlαλλά μπορείτε να τη χρησιμοποιήσετε οπουδήποτε στην εφαρμογή.

Highlight Me !

Η έξοδος του παραπάνω αποσπάσματος κώδικα θα μοιάζει με αυτό.

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

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

Ας ξεκινήσουμε λοιπόν με τη δημιουργία της δομικής μας οδηγίας. Σε αυτήν την οδηγία, θα εφαρμόσουμε την *appNotοδηγία που θα λειτουργεί ακριβώς αντίθετα από αυτήν *ngIf.

Τώρα δημιουργήστε ένα app-not.directive.tsαρχείο στο src/appφάκελο και προσθέστε τον παρακάτω κώδικα.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

Όπως είδατε στο παραπάνω απόσπασμα κώδικα, πραγματοποιούμε εισαγωγή Directive, Input, TemplateRef and ViewContainerRefαπό@angular/core.

Directiveπαρέχει την ίδια λειτουργικότητα για τον @Directiveδιακοσμητή. Ο Inputδιακοσμητής χρησιμοποιείται για την επικοινωνία μεταξύ των δύο στοιχείων. Στέλνει δεδομένα από το ένα συστατικό στο άλλο χρησιμοποιώντας δεσμευτική ιδιότητα

TemplateRefαντιπροσωπεύει το ενσωματωμένο πρότυπο που χρησιμοποιείται για την παρουσίαση των ενσωματωμένων προβολών. Αυτές οι ενσωματωμένες προβολές συνδέονται με το πρότυπο που πρόκειται να αποδοθεί.

ViewContainerRefείναι ένα κοντέινερ όπου μπορεί να επισυνάπτεται μία ή περισσότερες προβολές. Μπορούμε να χρησιμοποιήσουμε τη createEmbeddedView()λειτουργία για να συνδέσουμε τα ενσωματωμένα πρότυπα στο κοντέινερ.

Τώρα για να λειτουργήσει η appNotοδηγία, πρέπει να προσθέσουμε την οδηγία μας στον πίνακα δηλώσεων στο app.module.tsαρχείο.

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

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

Προσθέτω την appNotοδηγία στο, app.component.htmlαλλά μπορείτε να τη χρησιμοποιήσετε οπουδήποτε στην εφαρμογή.

True

False

Η *appNotοδηγία έχει σχεδιαστεί με τρόπο που προσαρτά το στοιχείο προτύπου στο DOM εάν η *appNotτιμή είναι falseακριβώς αντίθετη από την *ngIfοδηγία.

Η έξοδος του παραπάνω αποσπάσματος κώδικα θα μοιάζει με αυτό.

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