Denna artikel är en spegelartikel om maskinöversättning, klicka här för att hoppa till originalartikeln.

Utsikt: 11475|Svar: 0

[Kantig] Angular 4.x Router Link-kommandot

[Kopiera länk]
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.
Friskrivning:
All programvara, programmeringsmaterial eller artiklar som publiceras av Code Farmer Network är endast för lärande- och forskningsändamål; Ovanstående innehåll får inte användas för kommersiella eller olagliga ändamål, annars kommer användarna att bära alla konsekvenser. Informationen på denna sida kommer från internet, och upphovsrättstvister har inget med denna sida att göra. Du måste helt radera ovanstående innehåll från din dator inom 24 timmar efter nedladdning. Om du gillar programmet, vänligen stöd äkta programvara, köp registrering och få bättre äkta tjänster. Om det finns något intrång, vänligen kontakta oss via e-post.

Mail To:help@itsvse.com