Wir hatten gerade eine kurze Einführung in Attribut-Direktiven in der vorherigen Vorlesung.
Lassen Sie uns nun eine benutzerdefinierte Attribut-Direktive für unsere Winkelanwendung konstruieren und
sie dann innerhalb der Ansichten einiger Komponenten innerhalb unserer Winkelanwendung verwenden.
Auf dem Weg werden wir lernen, wie wir
benutzerdefinierte Direktiven erstellen und sie in unserer Angular-Anwendung verwenden können.
Wir werden Angular CLI verwenden, um die benutzerdefinierte Direktive zu erstellen und danach zu
aktualisieren, um die Art von
Funktionen auszuführen, die wir von dieser Attribut-Direktive zur Verfügung gestellt werden müssen.
Unter der behalten Sie die Direktive in einem separaten Ordner namens Direktiven
innerhalb meines App-Ordners.
Lassen Sie mich also einen neuen Ordner mit dem Namen Direktiven erstellen.
Jetzt werde ich meine benutzerdefinierte Direktive in diesem Direktiven-Ordner erstellen.
Wird die Hilfe der eckigen CLI nehmen, um unsere benutzerdefinierte Direktive zu erstellen. Geben
Sie also an der
Eingabeaufforderung ng generate oder g detectives/highlight ein.
Diese spezielle Richtlinie wird also die Highlight-Richtlinie genannt.
Damit werden wir
eine neue Direktive namens Highlight-Direktive erstellen, und dann werden wir nun gehen
und diese Highlight-Direktive-Dateien bearbeiten, die
erstellt wurden, um unsere benutzerdefinierte Direktive zu erstellen.
Was genau versuche ich mit dieser Richtlinie zu erreichen?
Lassen Sie mich Sie zur Menüansicht in unserer Angular Anwendung bringen.
Wenn ich in der Menüansicht eines dieser Elemente auswählen möchte,
habe ich keine Ahnung, wo ich gerade bin.
Stattdessen, wenn meine Maus auf eines dieser Elemente in meiner Rasterliste schwebt,
möchte ich in der Lage sein, einige Elemente hervorzuheben, um anzuzeigen, dass ich, wenn
ich klicke, dieses bestimmte Element auswählen werde.
Also, das ist, was die Funktionalität, die ich
mit meiner Highlight-Direktive entwerfen werde, die ich gerade erstellt habe.
Um dies zu tun, öffnen wir die Datei Hervorhebung directive.ts.
Sie sehen also, dass wir das Bare-Bones Gerüst für die Direktive
bereits hier haben und Sie werden sehen, dass wir
den Regisseur bereits aus dem Angular-Code importiert haben.
Nun dazu werde ich noch ein paar Importe hinzufügen.
Also, wir importieren elementRef und dann werden wir hier Renderer2 importieren.
Jetzt ist Renderer2 nur mit Angular vier und höher verfügbar.
Die frühere Version des Renderers hieß
Renderush und wurde jetzt mit Angular vier dupliziert.
Renderer2 ist jetzt eine neue Implementierung von
Renderer mit besserer Unterstützung für einige andere Funktionen.
Also werde ich den Renderer2 anwenden, um die Highlight-Direktive zu erstellen.
Warum verwenden wir diesen Renderer?
Wenn Sie nun Direktiven innerhalb Ihrer Angular-Anwendung
aus Ihrer Angular-Anwendung selbst erstellen,
obwohl unsere Angular-Anwendung derzeit hauptsächlich im Browser gerendert wird,
können Sie denselben Gerüstcode für
Ihre Angular-Anwendung verwenden, um eine Anwendung für andere Zwecke.
In dem nativen Skip-Kurs, den wir später in dieser Spezialisierung sehen werden,
werden wir eine weitere Verwendung dieses Codes zum Erstellen von Anwendungen mit NativeScript sehen.
In diesem Fall würde das Rendern auf eine andere Art und Weise erfolgen,
nicht in einen Browser.
Also, wir müssen dieses Renderer2 verwenden,
was es uns ermöglicht, sich automatisch an
die entsprechende Plattform anzupassen, auf der das Rendern dieser Ansicht durchgeführt wird.
Also, das ist der Grund, warum ich den Renderer hier verwende.
Eine weitere Sache, die ich importieren möchte, ist der HostListener.
Der HostListener hört Mausbewegungen vom Bildschirm ab
und reagiert unter diesen Umständen entsprechend.
Diese werden wir sehen, wenn wir die Richtlinie in wenigen Augenblicken erarbeiten.
Nun, da wir die Dinge importiert haben, die wir brauchen,
werden wir ein paar Dinge in unseren Konstruktor injizieren.
Also, wir werden zuerst ein el verwenden,
das vom Typ ElementRef ist und
auch der zweite, den wir verwenden werden, ist der
Renderer, der vom Typ Renderer2 ist.
Nun mit diesem, was wir tun werden, ist, dass wir
den HostListener verwenden und dann würden sie anzeigen, dass für den HostListener,
wenn das mouseenter Ereignis auftritt,
dann werden wir die onmouseenter Methode aufrufen
und in der onmouseenter Methode, werden wir etwas tun.
In ähnlicher Weise werde ich einen anderen
namens HostListener und Mouseleave erstellen.
Also, wenn die Maus eine bestimmte Region verlässt,
was wirst du dann auf Mouseleave tun?
Wir werden eine andere Operation machen.
Also, was wir tun werden, ist, wenn die Maus in eine bestimmte Region eintritt. In diesem Fall
verwenden wir diese Attribut-Direktive, um
das spezifische Element aus meiner Rasterliste hervorzuheben, auf das die Maus gefahren ist.
Das ist also der Zweck, diese zu implementieren,
und wenn der Mauszeiger von diesem Element wegbewegt,
wird das nicht mehr hervorgehoben.
Das ist also der Zweck dieser Richtlinie,
der Highlight-Direktive, die ich hier erstelle.
Also, wenn die Maus in einen bestimmten Bereich eintritt.
Also werde ich den Renderer verwenden und der Renderer stellt eine Methode namens AddClass zur Verfügung.
Diese Methode wird verwendet, um dem Rasterelement in meiner Rasterliste eine Klasse hinzuzufügen.
Also, die Klasse, die ich hinzufügen werde,
die Art, wie sie konfiguriert ist, wird this.el.NativeElement sagen und
der zweite Parameter ist
der Klassenname, den Sie anwenden werden, wenn Sie sich in diesen Bereich wagen.
Daher werden wir diese Hervorhebungsklasse auf dieses Element anwenden, wenn die
Maus in den Bereich bewegt, in dem das Element in der Ansicht gerendert wird.
Jetzt das Gleiche. Ich werde eine andere Methode machen, wenn die Maus verlässt,
ich werde diese Klasse entfernen.
Daher wird die removeClass-Methode auch von Renderer2 unterstützt.
Also, in diesem Fall,
wenn die Maus in diesen Bereich bewegt,
wird diese Hervorhebungsklasse zu diesem Rasterelement hinzugefügt.
Wenn die Maus dieses bestimmte Rasterelement verlässt,
wird die Hervorhebungsklasse aus den Rasterelementen entfernt.
So
füge ich mit dieser Attributdirektive Klassen,
CSS-Klassen zu meinem Gitterelement auf meiner GridView-Seite hinzu und entferne.
Nun, der nächste Schritt ist natürlich, diese Klasse als Highlight-Klasse genannt zu erstellen.
Also, um das zu tun, werde ich in die
Datei styles.scss gehen, wo wir die globalen Stile hier gespeichert haben.
Also, innerhalb der styles.scss-Datei
werde ich dort die Highlight-CSS-Klasse hinzufügen.
Die Highlight-CSS-Klasse werde ich als Hintergrundfarbe definieren.
Ich werde background-blass anwenden,
was ich bereits früher definiert habe und dann
würde ich eine Grenze von einem Pixel anwenden,
feste Grenze der Farbe,
primäre Farbe-dunkel, die auch ich früher
als CSS-Variable definiert habe und ich werde auch den z-Index auf eins erhöhen.
Das bedeutet, dass dieser Gegenstand über die verbleibenden Gegenstände dort aufgehoben wird.
Ich bin mir sicher, dass Sie aus Ihrem Wissen über CSS verstehen, was getan wird.
Darüber hinaus werde ich ein wenig eine Transformation auf dem Gegenstand dort machen,
ich werde es nur um eine winzige Menge skalieren,
indem ich es bis zu 1.01 skaliere.
Also, winziges bisschen angehoben und dann aufgetaucht,
so dass es auf dem Bildschirm hervorhebt.
Also, dies ist die CSS-Klasse, die
ich mit der benutzerdefinierten Direktive anwenden werde, die ich dort erstellt habe.
Nun, wo werde ich diese benutzerdefinierte Direktive anwenden?
Wir werden diese benutzerdefinierte Direktive in unserer Menükomponenten-Vorlagendatei verwenden.
Nun, bevor wir das tun,
gehen wir zurück zur Hervorhebungs-Direktive und
Sie würden feststellen, dass
Sie in der Highlight-Direktive diesen Direktive-Dekorator hier haben, wo Sie eine Eigenschaft namens Selektor haben,
die auf App-Highlight gesetzt wurde.
Also, wo immer Sie diese Direktive verwenden möchten,
verwenden Sie ein Attribut namens
AppHighlight innerhalb dieses bestimmten Elements in Ihrer Vorlage.
Also, so wird diese Direktive erstellt.
Also, lassen Sie uns diese App Highlight
Attribut-Direktive innerhalb unserer Menükomponenten Template-Datei anwenden.
Also, wenn ich in die Menükomponenten-Vorlagendatei
gehe, werde ich diese Highlight-Direktive hier auf diese Mat-Grid-Kachel anwenden.
Also, in dieser Grid-Kachel,
werde ich diese AppHighlight-Attributrichtlinie hier auf dieses bestimmte Element anwenden.
Damit haben wir alle Updates abgeschlossen.
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Anwendung nach dieser Änderung.
Gehen Sie zu unserer Anwendung im Browser.
Jetzt, mit der Anwendung der Apphighlight-Direktive, die wir gerade erstellt haben,
werden Sie genau feststellen, was passiert, wenn wir hier auf ein Element in unserer Menüansicht stöbern.
Sie bemerken also, dass jedes Mal, wenn Sie den Mauszeiger auf ein Element in
der Ansicht bewegen, die Highlight-CSS-Klasse auf jeden von ihnen angewendet wird,
wobei welches bestimmte Element im Menü hervorgehoben wird,
so dass dies eine bessere Benutzererfahrung für den Benutzer bietet.
Sie können sehen, dass die Größe dieses Elements immer so leicht
erhöht und in der Ansicht hier vorgebracht wird.
Damit ist die Implementierung
der benutzerdefinierten Attribut-Direktive abgeschlossen, die wir in dieser Übung durchgeführt haben.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachrichten-Direktive zu machen.