An diesem Punkt kennt jeder Entwickler mit Selbstachtung Angular2. Als Framework für die Webentwicklung, das zunehmend an Stärke gewinnt und zunehmend höhere Ziele verfolgt, sprechen wir über die berühmten Hybridanwendungen, die in aktuellen Entwicklungen zunehmend präsenter werden, 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.
Aber lassen Sie uns nicht verloren gehen, gehen wir direkt zum Hauptthema dieses Beitrags. Also, mal sehen, was sie sind, wie sie gemacht werden und am interessantesten, warum sie so nützlich sind! Meiner Meinung nach sind die Richtlinien eines der herausragenden Merkmale von angular2.
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 sich in angular2 entwickeln, kann ich Ihnen mit einem versichern 0,01% fehlermarge, die Sie verwenden, wie überprüfen wir?
Wenn Sie verwendet haben * ngIf, * ngFor, * ngSwitch, etc, mein Freund, Sie verwenden Anweisungen. Ja, das sind Richtlinien, die im Kern von angular2, und ich denke, Sie werden mir zustimmen, dass sie das Leben bei vielen Gelegenheiten erleichtern, wenn es um die Entwicklung geht.
Nun, heute werden wir sehen, wie wir unsere eigene Richtlinie erstellen und in unserem Projekt verwenden können!
Wie erstelle ich eine Direktive?
Es ist an der Zeit, an die Arbeit zu gehen, wie ich eine Direktive erstelle, denn dank angular-cli, unserem großartigen Freund, ist es so einfach.
ng generate Direktive $our_name
Wie einfach ist es nicht? Danke angular-cli! Aber lasst uns den Sieg nicht vorzeitig singen, wir haben noch einen Weg zu gehen. Mal sehen, was mit dem vorherigen Befehl passiert ist…
Dies hat die folgende Datei $ our_name erstellt.Richtlinie.ts und hat die App geändert.Modul.nach dem Hinzufügen unserer neuen Direktive zum Modul (es erstellt auch eine. spec.ts, um die Tests zu machen, aber heute ist nicht das Thema, das uns hierher bringt) mal sehen, welche Struktur eine Direktive hat!
Es ist nicht zu kompliziert, oder? Wir sehen, dass es einen Dekorateur gibt @Richtlinie mit einer Eigenschaft “Selektor” wo werden wir den Namen unseres Vorstands setzen. Der Name, den wir in diese Eigenschaft einfügen, ist derselbe Name wie das HTML-Attribut. Wir werden es uns in Kürze genauer ansehen, aber lassen Sie uns diese Richtlinie zunächst abschließen!
Wir werden die Grundlagen für die Arbeit hinzufügen, das HTML-Element, mit dem Sie verwenden werden, und einige Ereignisse, wie viel zwischen der Maus und wann sie beendet wird.
Hier haben wir zwei Konzepte eingeführt, die @ HostListener und die ElementRefaber keine Angst, Sie sind eigentlich ziemlich einfach zu verstehen.
ElementRef: Hier gibt es keine Komplikation, 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 hören, das die Direktive enthält. In diesem Fall ‘mouseenter ‘und’mouseleave’. Direkt unter der Funktion, die ausgeführt wird, wenn sie auftritt. Wie siehst du es?
Übrigens! Vergessen Sie nicht, zu importieren HostListener und ElementRef
Sehr interessant, aber das… Wie benutze ich es ?
Selbstverständlich! Jetzt ist es Zeit, unserer ersten Direktive einen Nutzen 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 es enthält. Wenn die Maus vorbei ist, ändert sich der Hintergrund in Rot und wenn er nicht grün ist
Was muss getan werden, um dies zu erreichen? Es sollte einen Code wie diesen geben.
Jetzt ist die Akte dran .html verwenden wir die Direktive wie folgt.
Sie müssen nichts in die Komponente importieren, sondern nur in das Modul importieren (In unserem Fall).Modul.ts) und ist bereits in allen Komponenten unseres Moduls zugänglich
Und das Ergebnis wird dem sehr ähnlich sein:
Es war überhaupt nicht schwer, oder? Aber du wirst mir zustimmen, dass die Art, wie es ist, nicht viel Gutes für uns tut. Was ist, wenn wir einen Parameter an die Direktive übergeben, um ihm die gewünschte Hintergrundfarbe mitzuteilen? Das wäre doch viel besser, oder? Mal sehen wie!
Gut! Was haben wir getan? Sehr einfach! Wir haben @Eingang um den Parameter zu erhalten (WICHTIG Die Variable, die @Input zuweist, hat denselben Namen wie die Richtlinienauswahl, andernfalls funktioniert sie nicht) Der Parameter, den wir erhalten, wurde verwendet, um die Hintergrundfarbe zuzuweisen. Dies hat folgendes Ergebnis:
Sieht so aus, als hätte das eine andere Farbe, nicht wahr? Wie wir sehen, war es nicht schwierig zu implementieren und wir gewinnen, dass wir das Verhalten nur einmal programmieren mussten und jetzt in der gesamten Anwendung verwendbar sind!
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. Bis jetzt der heutige Beitrag über Direktiven in angular2, ich hoffe es hat dir gefallen!
