Winkel: Nicht offensichtliche Merkmale von Direktivenselektoren

Wenn Sie jemals Angular-Direktiven erstellt haben, haben Sie wahrscheinlich ein Konstrukt verwendet, das Klammern als Selektor verwendet: ([]) . Ein solcher Ansatz ist, obwohl er am häufigsten angewendet wird, nicht der einzig mögliche. Tatsächlich bieten die in den Richtlinien verwendeten Selektoren dem Programmierer einen weiten Spielraum für Kreativität. Um diese Idee in Aktion zu demonstrieren, wird in dem Material, dessen Übersetzung wir heute veröffentlichen, die Methodik zum Erstellen einer Richtlinie für die Arbeit mit externen Links in der Vorlage erläutert. Insbesondere werden wir darüber sprechen, wie Sie reguläre HTML-Elemente finden und gegebenenfalls einige davon mit der :not Pseudoklasse von der Auswahl ausschließen können.

NgForm-Direktive

Schauen Sie sich die ngForm Direktive an, um ein Beispiel für einen komplexen Selektor zu betrachten:

 @Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]', }) 

Hier ist Folgendes zu beachten:

• Die Direktive kann für mehrere Selektoren ausgelegt sein, die mit einem Komma versehen werden können.
• Hier können Sie HTML- ngForm (wie <form> ) mit HTML-Attributen (wie ngForm ) ngForm .
• Um einige Elemente von der Auswahl auszuschließen, können Sie die Pseudoklasse :not .

Erstellen einer Direktive für die Arbeit mit externen Links

Mit externem Link ist das <a> -Tag gemeint, das keine routerLink Direktive hat. In Anbetracht dessen, was wir durch Analyse des vorherigen Beispiels herausgefunden haben, kann der entsprechende Selektor wie folgt beschrieben werden:

 @Directive({ selector: 'a:not([routerLink])', }) 

Das Schöne an diesem Selektor ist, dass wir keinen Attributnamen für etwas erstellen müssen, das am besten als das Gegenteil einer Entität beschrieben werden kann.

Zum Hervorheben externer Links können wir so etwas wie eine Direktive mit dem Namen externalLink . Dies ist jedoch völlig unnötig, da dieser Ansatz zu einer Verdoppelung bestehender Mechanismen führt. Außerdem kann man leicht vergessen, einigen externen Links eine ähnliche Direktive hinzuzufügen. Die Stärke unserer Methode ist, dass wir dank einer Zeile auf alle externen Links zugreifen können.

Die Ergebnisse der Anwendung der Richtlinie auf externe Links sollten folgendermaßen aussehen:

• Der Link sollte in einem separaten Fenster geöffnet werden.
• Das Attribut rel sollte dem Link hinzugefügt werden, um die Leistung zu verbessern und die Sicherheit der Lösung zu erhöhen.

Beide Ziele können mit @HostBinding() :

 @Directive({ selector: 'a:not([routerLink])' }) export class ExternalLinkDirective { @HostBinding('rel') @Input() rel = 'noopener'; @HostBinding('target') @Input() target = '_blank'; } 

Bitte beachten Sie, dass wir hier unter anderem die Eigenschaften mit dem @Input() dekoriert haben, was bei Bedarf Möglichkeiten zur Neudefinition eröffnet.

Eine andere gültige Implementierung einer solchen Lösung kann die Verwendung des @Attribute() . Dieser Ansatz führt zu einer leichten Leistungssteigerung, da im Gegensatz zum @Input() bei Verwendung von @Attribute() Werte der entsprechenden Eigenschaften nur einmal berechnet werden, @Attribute() die @Attribute() und target Eigenschaften werden im Änderungsprüfzyklus nicht ständig überprüft.

Details zu dieser Technik finden Sie hier .

Prüfungsrichtlinie

Erstellen wir einen einfachen Navigationsblock mit Links zu externen Ressourcen:

 <nav> <a href="https://google.com">Google</a> <a href="https://bing.com">Bing</a> <a href="https://forbes.com">Forbes</a> </nav> 

Wenn Sie mit den Tools des Chrome-Entwicklers den entsprechenden HTML-Code sehen, sehen Sie Folgendes:


HTML-Code des Navigationsblocks nach Anwendung der Direktive

Genau das brauchen wir. Die Direktive funktioniert ohne zusätzliche Attributselektoren.

Zusammenfassung

Aus diesem Material haben Sie gelernt, dass bei der Arbeit mit Angular-Direktiven keine Attributselektoren verwendet werden müssen. Hier haben wir zuerst die ngForm Direktive untersucht und dann das gewonnene Wissen verwendet, um unsere eigene Direktive zu erstellen, die für die Arbeit mit externen Links entwickelt wurde. Wir hoffen, dass Sie diese Technik nützlich finden.

Liebe Leser! Wenn Sie nicht offensichtliche Techniken zur Entwicklung von Webprojekten mit Angular kennen, teilen Sie uns diese bitte mit.