Mittlerweile kennt jeder Entwickler mit Selbstachtung Angular2. Ein Framework für die Webentwicklung, das immer mehr an Stärke gewinnt und jedes Mal mit höheren Zielen über die berühmten Hybridanwendungen spricht, die in aktuellen Entwicklungen zunehmend an Präsenz gewinnen, und etwas weiter über die PWA oder Progressive Web Apps, die wir sicherlich in kurzer Zeit immer wieder in der Welt der Technologie hören werden.
Aber lassen Sie uns nicht verloren gehen, kommen wir gleich zum Hauptthema dieses Beitrags. Schauen wir uns also an, was sie sind, wie sie hergestellt werden und vor allem, warum sie so nützlich sind! Meiner Meinung nach sind die Direktiven eines der Merkmale, die angular2 hervorheben muss.
Was ist eine Richtlinie?
Eine Direktive wird als Attribut in einem HTML-Tag dargestellt, dieses Attribut gibt dem DOM-Element, das es enthält, ein Verhalten, dieses Verhalten wird von uns definiert und kann in allen gewünschten Elementen verwendet werden.
Ich werde Ihnen ein Beispiel geben, Sie wissen es vielleicht nicht, aber wenn Sie in angular2 entwickeln, kann ich Ihnen versichern 0,01% die Fehlerquote, die Sie verwenden, sollen wir überprüfen?
Wenn Sie verwendet haben *ngIf, *ngFor, *ngSwitch, etc, mein Freund, du benutzt Direktiven. Ja, das sind Richtlinien, die im Kern von angular2, und ich denke, Sie werden mir zustimmen, dass sie uns bei vielen Gelegenheiten das Leben erleichtern, wenn es um die Entwicklung geht.
Nun, heute werden wir sehen, wie wir unsere eigene Direktive erstellen und in unserem Projekt verwenden können!
Wie erstelle ich eine Direktive?
Es ist an der Zeit, mich an die Arbeit zu machen, wie ich eine Direktive erstelle, denn dank angular-cli, unserem großartigen Freund, ist das so einfach.
ng generate Direktive $name_of_our_directiva
Wie einfach ist es nicht? Danke angular-cli! Aber lasst uns den Sieg nicht im Voraus singen, wir haben noch einen Weg vor uns. Mal sehen, was mit dem vorherigen Befehl passiert ist…
Dies hat die folgende Datei $name_of_our_directory erstellt.Richtlinie.ts und hat die App geändert.Modul.ts fügt dem Modul unsere neue Direktive hinzu (es erstellt uns auch eine.spec.ts, um die Tests durchzuführen, aber heute ist nicht das Thema, das uns hierher bringt) Mal sehen, welche Struktur eine Direktive hat!
Es ist nicht sehr kompliziert, oder? Wir sehen, dass es einen Dekorateur gibt @Richtlinie mit einer Immobilie “Selektor” wo wir den Namen unserer Richtlinie einfügen werden. Der Name, den wir in diese Eigenschaft einfügen, ist derselbe Name, den das HTML-Attribut haben wird. Kurz gesagt, wir werden es genauer sehen, aber zuerst vervollständigen wir diese Richtlinie!
Fügen wir die Grundlagen für die Arbeit hinzu, das HTML-Element, mit dem es verwendet wird, und ein paar Ereignisse, wie viel zwischen der Maus und dem Beenden.
Hier haben wir zwei Konzepte vorgestellt, die @HostListener und die ElementRef, aber lassen Sie sie nicht erschrecken, sie sind in der Tat ganz einfach zu verstehen.
ElementRef: Hier gibt es keine Komplikationen, dies ist ein Verweis auf das HTML-Element, das die Direktive enthält. Sie müssen nur wissen, wie Sie darauf zugreifen können, was wir in wenigen Augenblicken sehen werden : D
@HostListener: Gibt uns die Möglichkeit, auf Ereignisse des Elements zu warten, das die Direktive enthält. In diesem Fall ‘mouseenter’ und ‘mouseleave’. Direkt unter der Funktion, die ausgeführt wird, wenn es passiert. Wie siehst du es?
Übrigens! Import nicht vergessen HostListener und ElementRef
Sehr interessant, aber das… Wie benutze ich es?
Selbstverständlich! Jetzt ist es an der Zeit, unserer ersten Direktive ein Dienstprogramm zu geben! Jetzt sind wir bereit dafür.
Ich schlage vor, dass die erste Version unserer Direktive verwendet wird, um die Hintergrundfarbe des HTML-Elements zu ändern, das sie enthält. Wenn sich die Maus darauf befindet, ändert sich der Hintergrund in Rot und wenn nicht, wird er grün belassen
Was muss getan werden, um es zu bekommen? Es sollte einen ähnlichen Code geben.
Jetzt ist die Akte an der Reihe.html verwenden wir die Direktive wie folgt.
Es ist nicht erforderlich, etwas in die Komponente zu importieren, es muss nur in das Modul importiert werden (in unserem Fall app.Modul.ts) und ist bereits in allen Komponenten unseres Moduls zugänglich
Und das Ergebnis wird diesem sehr ähnlich sein:
Es war überhaupt nicht schwierig, oder? Aber Sie werden mir zustimmen, so wie es ist, ist es uns nicht viel wert. Was wäre, wenn wir einen Parameter an die Direktive übergeben würden, um ihr die gewünschte Hintergrundfarbe mitzuteilen. Das wäre viel besser, oder? Mal sehen wie!
Gut! Was haben wir getan? Ganz einfach! Wir haben verwendet @Eingang um den Parameter zu erhalten (WICHTIG die Variable, die @Input zuweist, hat denselben Namen wie der Direktiven-Selektor, sonst funktioniert es nicht) Wir haben den erhaltenen Parameter verwendet, um ihm die Hintergrundfarbe zuzuweisen. Dies hat folgendes Ergebnis:
Es scheint, dass dies bereits eine andere Farbe hat, nein? Wie wir sehen, war die Implementierung nicht schwierig und wir haben gewonnen, dass wir das Verhalten nur einmal programmieren mussten und es jetzt in der gesamten Anwendung verwendbar ist!
Erkenntnis
Ich bin sicher, dass dies Ihnen bei der Entwicklung eines Projekts großartige Ideen geben kann. Es ist ein weiterer Schritt, damit der Code mit uns und nicht gegen uns funktioniert. Soweit der heutige Beitrag über Direktiven in angular2, ich hoffe es hat dir gefallen!
