|
|
Geplaatst op 25-10-2018 15:52:29
|
|
|
Introductie tot RouterLink-commando's
Het RouterLink-commando stelt je in staat om te koppelen aan een specifiek deel van je applicatie. Als de link statisch is, kunnen we het commando op de volgende manier gebruiken:
Als je linkadressen met dynamische waarden moet genereren, kun je een array van padsegmenten doorgeven en vervolgens de parameters voor elk segment. Bijvoorbeeld, met een array van ['/team', teamId, 'user', userName, {details: true}] willen we een link genereren naar /team/11/user/bob; details=true 。
Meerdere statische segmenten kunnen worden samengevoegd tot één, bijvoorbeeld ['/team/11/user', userName, {details: true}].
Het eerste padfragment kan worden gedefinieerd als /, ./, of . / Begin:
- Als het begint met /, zal de route omhoog gaan kijken vanaf de wortelroute
- Als het begint met ./ of niet wordt gebruikt, begint de route omhoog te zoeken vanaf de kindroute die momenteel actief is voor de route
- Als je begint met: / begint, de route gaat naar het volgende niveau van zoekopdracht
Je kunt queryparameters en fragmenten op de volgende manieren instellen:
Het RouterLink-commando genereert de volgende link op basis van de hierboven ingestelde invoerparameters: /user/bob#education?debug=true. Daarnaast kunnen we via de queryParamsHandling-eigenschap declareren hoe om te gaan met queryParamsHandling; de beschikbare opties zijn:
- merge - Samenvoegen bestaande queryParams in de huidige queryParams
- preserve - Sla de huidige queryParams op
- default ('') - Gebruik alleen queryparameters
Specifieke gebruiksvoorbeelden zijn als volgt:
RouterLink-commando in detail uitgelegd
RouterLink-commandodefinitie
RouterLink commandoinvoereigenschap
Stel de queryparameters in die met de URL te maken hebben
@Input() queryParams: {[k: string]: any};
Stel het hashfragment in op de URL
@Input() fragment: snaar;
Stel de verwerkingsmodus van queryparameters in: merge, preserve en default
@Input() queryParamsHandling: QueryParamsHandling;
Bepaalt of fragmenten behouden moeten worden
@Input() preserve Fragment: booleaan;
Bij het instellen van paginanavigatie, of er nieuwe statussen aan de geschiedenis toegevoegd moeten worden
@Input() skiplocatio{filter}nChange: boolean;
Bij het instellen van de paginanavigatie wordt de huidige status in de geschiedenis vervangen
@Input() vervangenUrl: boolean;
Stel commandoparameters in, bijvoorbeeld: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
if (commands != null) {
this.commands = Array.isArray(commands) ? commando's: [commands];
} anders {
this.commands = [];
}
}
RouterLink-commandobinding
Gebeurtenisbinding
RouterLink-klasse
@Attribute()
@Attribute('attributeName') decorator: Gebruikt om de attribuutwaarde te verkrijgen die overeenkomt met de attribuutnaam NameNaam op het commandohostelement.
tabindex
De tabindex-eigenschap specificeert de tabtoetsbesturingsvolgorde van een element (wanneer de tab-toets wordt gebruikt voor navigatie).
De volgende elementen ondersteunen tabindexattributen: <a>, <area>, <button>, <input><object><select> , , , , , en <textarea> .
Tabindex-syntaxis:
RouterLink-klasse
RouterLink-klasse
RouterLinkWithHref-commando
RouterLinkWithHref-richtlijn
RouterLinkWithHref-instructie-invoereigenschap
RouterLinkWithHref-commando
Attribuutbinding
<a> Tags definiëren hyperlinks die worden gebruikt om van de ene pagina naar de andere te linken. <a> Er zijn twee belangrijke kenmerken in tags:
HREF - specificeert het URL-adres van de pagina waar de link naartoe leidt. Als je het href-attribuut niet gebruikt, kun je de volgende attributen niet gebruiken: downloaden, media, rel, target en type attributen.
Doel - specificeert hoe de gekoppelde pagina opent in het browservenster, en de parameterwaarden zijn voornamelijk als volgt:
_blank - Laad het doeldocument in een nieuw browservenster.
_parent - Dit doel zorgt ervoor dat het document wordt geladen in het oudervenster of frameset met het frame waarnaar de hyperlink verwijst. Als deze referentie in een venster of in een topniveau framework is, dan is het equivalent aan de doel-_self.
_self - De waarde van dit doel is het standaarddoel voor alle labels die geen doel specificeren <a> , waardoor het doeldocument wordt geladen en weergegeven als het brondocument in hetzelfde frame of venster. Dit doel is overbodig en overbodig, tenzij het <base> wordt gebruikt met het doelattribuut in het tabblad documenttitel.
_top - Dit doel zorgt ervoor dat het document het venster met de hyperlink laadt, en met het gebruik van het _top doel worden alle inbegrepen frames gewist en wordt het document in het hele browservenster geladen.
Gebeurtenisbinding
MouseEvent vertegenwoordigt een gebeurtenis die plaatsvindt wanneer een gebruiker interactie heeft met een pointer-apparaat (zoals een muis), en veelvoorkomende gebeurtenissen zijn: klik, dblklik, mouseup en mousedown-gebeurtenissen. Het MouseEvent-object bevat een knopattribuut dat de door de gebruiker ingedrukte muisknop vertegenwoordigt, en de mogelijke attribuutwaarden zijn als volgt:
- 0 - De hoofdknop wordt ingedrukt, meestal verwijzend naar de linkermuisknop.
- 1 - De hulpknop wordt ingedrukt, meestal verwijzend naar het muiswiel.
- 2 - De tweede toets wordt ingedrukt, meestal verwijzend naar de rechtermuisknop.
- 3 - De vierde knop wordt ingedrukt, meestal verwijzend naar de terugknop van de browser.
- 4 - De vijfde knop wordt ingedrukt, meestal verwijzend naar de vooruit-knop van de browser.
Voor een muis die is ingesteld voor linkshandig gebruik, zullen de toetsaanslagen het tegenovergestelde zijn. In dit geval wordt de waarde van rechts naar links gelezen. In de bovenstaande voorbeeldcode openen we ook de ctrlKey- en metaKey-eigenschappen van het MouseEvent-object, die naast deze twee eigenschappen ook de altKey- en shiftKey-eigenschappen bevatten. Deze eigenschappen worden hieronder beschreven:
- MouseEvent.ctrlKey - geeft true terug als de control-toets wordt ingedrukt wanneer het muisevent wordt geactiveerd.
- MouseEvent.metaKey - geeft true terug als de (Window - ⊞, Mac - ⌘ Command) toets wordt ingedrukt wanneer het muisevent wordt geactiveerd.
- MouseEvent.altKey - Geeft true terug wanneer het muisevent wordt geactiveerd als de (Window - alt, Mac - Option, of ⌥) toets wordt ingedrukt.
- MouseEvent.shiftKey - Geeft true terug als de shift-toets wordt ingedrukt wanneer een muisgebeurtenis wordt geactiveerd.
Als je op ctrlKey drukt en vervolgens op het tabblad klikt, wordt er een <a> nieuwe tabbladpagina aangemaakt met het huidige URL-adres. Als je op metaKey drukt en vervolgens op het <a> tabblad klikt, wordt de huidige pagina vernieuwd. Daarom wordt in de onClick()-methode het bijbehorende oordeel uitgevoerd.
RouterLinkWithHref-commandolifecycle
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref-klasse
RouterLinkWithHref-klasse
RouterLinkWithHref-klasse
Introductie tot het RouterLinkActive commando
De RouterLinkActive-richtlijn stelt je in staat om CSS-klassen toe te voegen aan een element wanneer de gekoppelde route actief wordt. Bekijk het volgende voorbeeld:
Wanneer het URL-adres /user of /user/bob is, wordt de active-link-klasse aan <a> de tag toegevoegd. Als de URL verandert, wordt de active-link-klasse automatisch uit de <a> tag verwijderd. Je kunt ook meerdere klassen tegelijk toevoegen, als volgt:
Bij het toepassen van het commando routerLinkActive kun je ook de parameter: routerLinkActiveOptions instellen hoe URL's worden gematcht, als volgt:
Wanneer de parameter {exact: true} wordt geconfigureerd, wordt de active-link-klasse alleen aan de tag toegevoegd als het URL-adres exact overeenkomt <a> met . Je kunt ook een RouterLinkActive-instantie toewijzen aan een templatevariabele en de isActive-status van de commando-richtlijnen direct controleren:
Tot slot kun je ook het RouterLinkActive-commando toepassen op het ouderelement van de RouterLink. Voorbeelden zijn:
In het bovenstaande voorbeeld wordt wanneer de URL wordt geadresseerd als /user/jim of /user/bob, de active-link-klasse toegevoegd <div> aan het bijbehorende element.
RouterLinkActive commando in detail uitgelegd
RouterLinkActive-commandodefinitie
RouterLinkActive commando-invoereigenschap
RouterLinkActive commandolifecycle
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive-klasse
RouterLinkActive-klasse
RouterLinkActive-klasse
|
Vorig:Er is hier een functie die echt goed is, je kunt geld verdienen, het is promotie.Volgend:Een DZ online betalingscontractvrije plugin uitgebracht, die beschikbaar is voor persoonlijke tests.
|
