|
|
Publicerad på 2018-10-25 15:52:29
|
|
|

Introduktion till RouterLink-kommandon
RouterLink-kommandot låter dig länka till en specifik del av din applikation. Om länken är statisk kan vi använda kommandot på följande sätt:
Om du behöver generera länkadresser med dynamiska värden kan du skicka en array av vägsegment och sedan parametrarna för varje segment. Till exempel, med en array av ['/team', teamId, 'user', userName, {details: true}] vill vi generera en länk till /team/11/user/bob; detaljer=true 。
Flera statiska segment kan slås ihop till ett, t.ex. ['/team/11/user', userName, {details: true}].
Den första vägfragmentet kan definieras som /, ./, eller . / Början:
- Om den börjar med /kommer rutten att börja titta upp från rotrutten
- Om den börjar med ./ eller inte används, kommer rutten att börja titta upp från den underkategori som för närvarande är aktiv för rutten
- Om du börjar med: / börjar, rutten går till nästa nivå av uppslagning
Du kan ställa in frågeparametrar och fragment på följande sätt:
RouterLink-kommandot genererar följande länk baserat på de inmatningsparametrar som satts ovan: /user/bob#education?debug=true. Dessutom kan vi deklarera hur man hanterar frågeparametrar via queryParamsHandling-egenskapen, de tillgängliga alternativen är:
- merge - Slå ihop befintliga queryParams till de nuvarande queryParams
- preserve - Spara de aktuella queryParams
- default ('') - Använd endast frågeparametrar
Specifika användningsexempel är följande:
RouterLink-kommandot förklarat i detalj
RouterLink-kommandodefinition
RouterLink-kommandoinmatningsegenskapen
Ställ in frågeparametrarna relaterade till URL:en @Input() queryParams: {[k: string]: any};
Sätt hashfragmentet på URL:en @Input() fragment: sträng;
Ställ in behandlingsläget för frågeparametern: slå ihop, bevara och standard @Input() queryParamsHandling: QueryParamsHandling;
Sätter om fragment ska behållas @Input() bevaraFragment: booleskt;
När du ställer in sidnavigering, om du ska lägga till nya statusar i historiken @Input() skiplocatio{filter}nChange: boolean;
När du ställer in sidnavigeringen, om du ska byta ut det aktuella tillståndet i historiken @Input() ersättUrl: booleskt;
Sätt kommandon parameterinformation, till exempel: ['/user/bob'] @Input() set routerLink(commands: any[]|string) { om (kommandon != null) { this.commands = Array.isArray(commands) ? kommandon: [kommandon]; } annars { this.commands = []; }
}
RouterLink-kommandobindning
Händelsebindning
RouterLink-klassen
@Attribute() @Attribute('attributeName') decorator: Används för att erhålla attributvärdet som motsvarar attributnamnet på attributeteName-attributet på kommandots värdelement.
tabindex Tabindex-egenskapen specificerar tabbtangentens kontrollordning för ett element (när tabb-tangenten används för navigering).
Följande element stödjer tabindexattribut: <a>, <area>, <button>, <input><object><select> , , , , och <textarea> .
Tabindexsyntax:
RouterLink-klassen
RouterLink-klassen
RouterLinkWithHref-kommandot
RouterLinkWithHref-direktivet
RouterLinkWithHref-direktivets inmatningsegenskap
RouterLinkWithHref-kommandot
Attributbindning
<a> Taggar definierar hyperlänkar som används för att länka från en sida till en annan. <a> Det finns två viktiga attribut i taggar:
HREF - specificerar URL-adressen på sidan som länken leder till. Om du inte använder href-attributet kan du inte använda följande attribut: nedladdning, media, rel, target och typ-attribut.
Target - specificerar hur den länkade sidan öppnas i webbläsarfönstret, och dess parametervärden är huvudsakligen följande:
_blank - Ladda måldokumentet i ett nytt webbläsarfönster.
_parent – Detta mål gör att dokumentet laddas in i det föräldrade fönstret eller ramuppsättningen som innehåller den ram som hyperlänken refererar till. Om denna referens finns i ett fönster eller i ett toppnivåramverk är den ekvivalent med mål-_self.
_self - Värdet på detta mål är standardmålet för alla etiketter som inte anger ett mål <a> , vilket gör att måldokumentet laddas och visas som källdokumentet i samma ram eller fönster. Detta mål är redundant och onödigt om det <base> inte används tillsammans med målattributet i fliken för dokumentets titel.
_top - Detta mål gör att dokumentet laddar fönstret som innehåller hyperlänken, och med hjälp av _top mål raderas alla inkluderade ramar och dokumentet laddas i hela webbläsarfönstret.
Händelsebindning
MouseEvent representerar en händelse som inträffar när en användare interagerar med en pekarenhet (såsom en mus), och vanliga händelser inkluderar: klick, dblklick, mouseup och mousedown-händelser. MouseEvent-objektet innehåller ett knappattribut som representerar musknappen som användaren trycker på, och de möjliga attributvärdena är följande:
- 0 - Huvudknappen trycks in, vanligtvis med vänster musknapp.
- 1 - Hjälpknappen trycks in, vanligtvis med hänvisning till mushjulet.
- 2 - Den andra tangenten trycks in, vanligtvis med hänvisning till höger musknapp.
- 3 - Den fjärde knappen trycks in, vanligtvis med hänvisning till webbläsarens bakåtknapp.
- 4 - Den femte knappen trycks in, vanligtvis med hänvisning till webbläsarens vidareknapp.
För en mus konfigurerad för vänsterhänt bruk kommer tangenttryckningarna att vara motsatta. I detta fall läses värdet från höger till vänster. I exempelkoden ovan kommer vi också åt ctrlKey- och metaKey-egenskaperna för MouseEvent-objektet, som innehåller altKey- och shiftKey-egenskaperna utöver dessa två egenskaper. Dessa egenskaper beskrivs nedan:
- MouseEvent.ctrlKey – returnerar true om kontrolltangenten trycks när mushändelsen triggas.
- MouseEvent.metaKey - returnerar true om (Window - ⊞, Mac - ⌘ Command) knappen trycks när mushändelsen triggas.
- MouseEvent.altKey - Returnerar true när mushändelsen triggas om (Window - alt, Mac - Option, eller ⌥) tangenten trycks in.
- MouseEvent.shiftKey - Returnerar true om shift-tangenten trycks när en mushändelse triggas.
Om du trycker på ctrlKey och sedan klickar på fliken, <a> skapas en ny fliksida med den aktuella URL-adressen. Om du trycker på metaKey och sedan klickar på <a> fliken uppdateras den aktuella sidan. Därför utförs motsvarande bedömning i onClick()-metoden.
RouterLinkWithHref-kommandolivscykeln
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref-klassen
RouterLinkWithHref-klassen
RouterLinkWithHref-klassen
Introduktion till kommandot RouterLinkActive
RouterLinkActive-direktivet låter dig lägga till CSS-klasser till ett element när den länkade rutten blir aktiv. Titta på följande exempel:
När URL-adressen är /user eller /user/bob, kommer active-link-klassen att läggas till <a> taggen. Om URL:en ändras tas active-link-klassen automatiskt bort från <a> taggen. Du kan också lägga till flera klasser samtidigt, enligt följande:
När du använder kommandot routerLinkActive kan du också använda parametern routerLinkActiveOptions för att konfigurera hur URL:er matchas, enligt följande:
När parametern {exact: true} konfigureras läggs aktiv-länk-klassen endast till taggen om URL-adressen exakt stämmer <a> överens med . Du kan också tilldela en RouterLinkActive-instans till en mallvariabel och kontrollera isActive-statusen för kommandodirektiven:
Slutligen kan du också använda kommandot RouterLinkActive på föräldraelementet i RouterLink. Exempel inkluderar:
I exemplet ovan, när URL:en adresseras som /user/jim eller /user/bob, läggs active-link-klassen <div> till motsvarande element.
RouterLinkActive-kommandot förklarat i detalj
RouterLinkActive-kommandodefinition
RouterLinkActive-kommandoinmatningsegenskapen
RouterLinkActive-kommandolivscykeln
ngEfterInnehållInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive-klassen
RouterLinkActive-klassen
RouterLinkActive-klassen
|
Föregående:Det finns en funktion här som är riktigt bra, du kan tjäna pengar, det är marknadsföring.Nästa:Släppte ett plugin utan DZ online-betalningsavtal, som är tillgängligt för personlig testning.
|