|
|
Veröffentlicht am 25.10.2018 15:52:29
|
|
|

Einführung in RouterLink-Befehle
Der Befehl RouterLink ermöglicht es dir, mit einem bestimmten Teil deiner Anwendung zu verknüpfen. Wenn der Link statisch ist, können wir den Befehl folgendermaßen verwenden:
Wenn Sie Linkadressen mit dynamischen Werten generieren müssen, können Sie ein Array von Pfadsegmenten und dann die Parameter für jedes Segment weitergeben. Zum Beispiel bedeutet die Verwendung eines Arrays von ['/team', teamId, 'user', userName, {details: true}], dass wir einen Link zu /team/11/user/bob erzeugen wollen; details=true 。
Mehrere statische Segmente können zu einem zusammengeführt werden, z. B. ['/team/11/user', userName, {details: true}].
Das erste Pfadfragment kann definiert werden als /, ./ oder . / Anfang:
- Wenn sie mit /beginnt, beginnt die Route vom Wurzelpfad nach oben zu schauen.
- Wenn sie mit ./ beginnt oder nicht genutzt wird, beginnt die Route von der aktuell aktiven Kindroute nach oben zu schauen
- Wenn Sie mit beginnen: / beginnt, führt die Route zur nächsten Stufe der Suche
Sie können Abfrageparameter und -fragmente auf folgende Weise festlegen:
Der Befehl RouterLink erzeugt den folgenden Link basierend auf den oben gesetzten Eingabeparametern: /user/bob#education?debug=true. Zusätzlich können wir angeben, wie Abfrageparameter über die queryParamsHandling-Eigenschaft handhabt wird; die verfügbaren Optionen sind:
- Merge – Bestehende queryParams in die aktuellen queryParams zusammenführen
- preserve – Speichere die aktuellen queryParams
- default ('') – Verwenden Sie nur Abfrageparameter
Konkrete Anwendungsbeispiele sind wie folgt:
RouterLink-Befehl ausführlich erklärt
RouterLink-Befehlsdefinition
RouterLink-Befehlseingangseigenschaft
Setze die Abfrageparameter im Zusammenhang mit der URL @Input() queryParams: {[k: string]: any};
Setzen Sie das Hashfragment auf die URL @Input() Fragment: String;
Stellen Sie den Verarbeitungsmodus für die Abfrageparameter ein: Merge, Pkeep und Standard @Input() queryParamsHandling: QueryParamsHandling;
Bestimmt, ob Fragmente beibehalten werden sollen @Input() preserve Fragment: boolesch;
Beim Einrichten der Seitennavigation, ob neue Statusse zum Verlauf hinzugefügt werden sollen @Input() skiplocatio{filter}nChange: boolean;
Beim Setzen der Seitennavigation, ob der aktuelle Zustand in der Historie ersetzt werden soll @Input() ersetzenURL: boolean;
Set-Befehle, Parameterinformation, zum Beispiel: ['/user/bob'] @Input() set routerLink(commands: any[]|string) { wenn (Befehle != null) { this.commands = Array.isArray(commands) ? Befehle: [Befehle]; } sonst { this.commands = []; }
}
RouterLink-Befehlsbindung
Ereignisbindung
RouterLink-Klasse
@Attribute() @Attribute('attributeName') Decorator: Wird verwendet, um den Attributwert zu erhalten, der dem Attributnamen Attribut NameName auf dem Kommando-Host-Element entspricht.
tabindex Die Tabindex-Eigenschaft legt die Reihenfolge der Tab-Taste für ein Element fest (wenn die Tab-Taste zur Navigation verwendet wird).
Die folgenden Elemente unterstützen Tabindex-Attribute: <a>, <area>, <button>, <input><object><select> , , , , und <textarea> .
Tabindex-Syntax:
RouterLink-Klasse
RouterLink-Klasse
RouterLinkWithHref-Befehl
RouterLinkWithHref-Direktive
Eingabeeigenschaft der RouterLinkLinkWithHref-Direktive
RouterLinkWithHref-Befehl
Attributbindung
<a> Tags definieren Hyperlinks, die verwendet werden, um von einer Seite zur nächsten zu verlinken. <a> Es gibt zwei wichtige Attribute in Tags:
HREF – gibt die URL-Adresse der Seite an, auf die der Link führt. Wenn du das href-Attribut nicht verwendest, kannst du die folgenden Attribute nicht verwenden: Download, Media, Rel, Ziel und Typ-Attribute.
Ziel – gibt an, wie die verlinkte Seite im Browserfenster geöffnet wird, und ihre Parameterwerte sind hauptsächlich wie folgt:
_blank – Laden Sie das Zieldokument in einem neuen Browserfenster.
_parent - Dieses Ziel bewirkt, dass das Dokument in das übergeordnete Fenster oder die Frame-Menge lädt, die das vom Hyperlink referenzierte Frame enthält. Wenn diese Referenz in einem Fenster oder in einem Top-Level-Framework liegt, ist sie äquivalent zum Ziel-_self.
_self – Der Wert dieses Ziels ist das Standardziel für alle Labels, die kein Ziel angeben <a> , was dazu führt, dass das Zieldokument geladen und als Quelldokument im selben Rahmen oder Fenster angezeigt wird. Dieses Ziel ist redundant und unnötig, es sei denn, es <base> wird zusammen mit dem Zielattribut im Dokumenttitel-Tab verwendet.
_top – Dieses Ziel bewirkt, dass das Dokument das Fenster mit dem Hyperlink lädt, und mit dem Zielpunkt _top werden alle enthaltenen Frames gelöscht und das Dokument im gesamten Browserfenster geladen.
Ereignisbindung
MouseEvent stellt ein Ereignis dar, das auftritt, wenn ein Benutzer mit einem Zeigergerät (wie einer Maus) interagiert, und gängige Ereignisse sind: Klick, dblclick, mouseup und mousedown. Das MouseEvent-Objekt enthält ein Tastenattribut, das die vom Benutzer gedrückte Maustaste darstellt, und die möglichen Attributwerte sind wie folgt:
- 0 – Die Haupttaste wird gedrückt, meist bezieht sich auf die linke Maustaste.
- 1 - Die Hilfstaste wird gedrückt, meist bezieht sich auf das Mausrad.
- 2 – Die zweite Taste wird gedrückt, meist bezieht sich auf die rechte Maustaste.
- 3 – Der vierte Knopf wird gedrückt, meist bezieht sich auf den Browser-Zurück-Button.
- 4 - Die fünfte Taste wird gedrückt, meist bezieht sich auf die Vorwärtstaste des Browsers.
Bei einer Maus, die für die Linkshändigkeit konfiguriert ist, sind die Tastenanschläge das Gegenteil. In diesem Fall wird der Wert von rechts nach links gelesen. Im obigen Beispielcode greifen wir außerdem auf die ctrlKey- und metaKey-Eigenschaften des MouseEvent-Objekts zu, die zusätzlich zu diesen beiden Eigenschaften die altKey- und shiftKey-Eigenschaften enthalten. Diese Eigenschaften werden im Folgenden beschrieben:
- MouseEvent.ctrlKey – gibt true zurück, wenn die Steuertaste gedrückt wird, wenn das Mausereignis ausgelöst wird.
- MouseEvent.metaKey – gibt true zurück, wenn die (Window - ⊞, Mac - ⌘ Command) Taste gedrückt wird, wenn das Mausereignis ausgelöst wird.
- MouseEvent.altKey – Gibt true zurück, wenn das Mausereignis ausgelöst wird, wenn die (Window - alt, Mac - Option oder ⌥) Taste gedrückt wird.
- MouseEvent.shiftKey – Gibt true zurück, wenn die Shift-Taste gedrückt wird, wenn ein Mausereignis ausgelöst wird.
Wenn du auf ctrlKey drückst und dann auf den Tab klickst, <a> wird eine neue Tab-Seite mit der aktuellen URL-Adresse erstellt. Wenn du metaKey drückst und dann auf den Tab klickst <a> , wird die aktuelle Seite aktualisiert. Daher wird in der onClick()-Methode das entsprechende Urteil vorgenommen.
RouterLinkWithHref-Befehlszyklus
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref-Klasse
RouterLinkWithHref-Klasse
RouterLinkWithHref-Klasse
Einführung in den Befehl RouterLinkActive
Die RouterLinkActive-Direktive erlaubt es, CSS-Klassen zu einem Element hinzuzufügen, wenn die verknüpfte Route aktiv wird. Schauen Sie sich folgendes Beispiel an:
Wenn die URL-Adresse /user oder /user/bob ist, wird die Klasse active-link <a> zum Tag hinzugefügt. Wenn sich die URL ändert, wird die Klasse active-link automatisch aus dem <a> Tag entfernt. Du kannst auch mehrere Klassen gleichzeitig hinzufügen, wie folgt:
Beim Anwenden des Befehls routerLinkActive können Sie auch den Parameter routerLinkActiveOptions verwenden, um zu konfigurieren, wie URLs abgeglichen werden, wie folgt:
Wenn der {exact: true}-Parameter konfiguriert ist, wird die Klasse active-link nur dann zum Tag hinzugefügt, wenn die URL-Adresse genau übereinstimmt <a> . Du kannst auch eine RouterLinkActive-Instanz einer Vorlagenvariable zuweisen und den isActive-Status der Befehlsdirektiven direktive überprüfen:
Schließlich können Sie den Befehl RouterLinkActive auch auf das übergeordnete Element des RouterLink anwenden. Beispiele sind:
Im obigen Beispiel wird die Klasse active-link, wenn die URL als /user/jim oder /user/bob adressiert ist, dem <div> entsprechenden Element hinzugefügt.
RouterLinkActive Befehl ausführlich erklärt
RouterLinkActive-Befehlsdefinition
Eingabeeigenschaft des Befehls RouterLinkActive
RouterLinkActive-Befehlslebenszyklus
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive-Klasse
RouterLinkActive-Klasse
RouterLinkActive-Klasse
|
Vorhergehend:Hier gibt es eine wirklich gute Funktion, man kann Geld verdienen, es ist die Promotion.Nächster:Es wurde ein kostenloses Plugin für DZ-Zahlungsverträge veröffentlicht, das für persönliche Tests verfügbar ist.
|