|
|
Opslået på 25/10/2018 15.52.29
|
|
|
Introduktion til RouterLink-kommandoer
RouterLink-kommandoen giver dig mulighed for at linke til en specifik del af din applikation. Hvis linket er statisk, kan vi bruge kommandoen på følgende måde:
Hvis du skal generere linkadresser med dynamiske værdier, kan du sende et array af stisegmenter og derefter parametrene for hvert segment. For eksempel betyder brugen af et array af ['/team', teamId, 'user', userName, {details: true}], at vi ønsker at generere et link til /team/11/user/bob; details=true 。
Flere statiske segmenter kan slås sammen til ét, f.eks. ['/team/11/user', brugernavn, {detaljer: true}].
Det første stifragment kan defineres som /, ./, eller . / Begyndelse:
- Hvis den starter med /, vil ruten begynde at kigge op fra rodruten
- Hvis den starter med ./ eller ikke bruges, vil ruten begynde at kigge op fra den underliggende rute, der aktuelt er aktiv for ruten
- Hvis du starter med : / begynder, ruten går til næste niveau af opslag
Du kan sætte forespørgselsparametre og fragmenter på følgende måder:
RouterLink-kommandoen vil generere følgende link baseret på inputparametrene sat ovenfor: /user/bob#education?debug=true. Derudover kan vi erklære, hvordan forespørgselsparametre håndteres, via queryParamsHandling-egenskaben; de tilgængelige muligheder er:
- merge - Sammenlæg eksisterende queryParams med de nuværende queryParams
- preserve - Gem de aktuelle queryParams
- default ('') - Brug kun forespørgselsparametre
Specifikke eksempler på anvendelse er som følger:
RouterLink-kommandoen forklaret i detaljer
RouterLink-kommando definition
RouterLink kommandoinput-egenskab
Indstil forespørgselsparametrene relateret til URL'en
@Input() queryParams: {[k: string]: any};
Sæt hashfragmentet på URL'en
@Input() fragment: streng;
Indstil forespørgselsparameterbehandlingstilstanden: sammenfletning, bevare og standard
@Input() queryParamsHandling: QueryParamsHandling;
Sætter om fragmenter skal beholdes
@Input() bevare Fragment: boolesk;
Når man sætter sidenavigation, om man skal tilføje nye statusser til historikken
@Input() skiplocatio{filter}nChange: boolean;
Når du sætter sidenavigationen, om den nuværende tilstand i historikken skal udskiftes
@Input() erstatteUrl: boolean;
Sæt kommandoer med parameterinformation, for eksempel: ['/user/bob']
@Input()
set routerLink(kommandoer: any[]|string) {
hvis (kommandoer != null) {
this.commands = Array.isArray(commands) ? kommandoer: [kommandoer];
} ellers {
this.commands = [];
}
}
RouterLink kommandobinding
Begivenhedsbinding
RouterLink-klassen
@Attribute()
@Attribute('attributeName') decorator: Bruges til at opnå attributværdien, der svarer til attributnavnet på kommandoens værtelement.
tabindex
Tabindex-egenskaben angiver tabulatortastens kontrolrækkefølge for et element (når tabulatortasten bruges til navigation).
Følgende elementer understøtter tabindeksattributter: <a>, <area>, <button>, <input><object><select> , , , , og <textarea> .
Tabindex-syntaks:
RouterLink-klassen
RouterLink-klassen
RouterLinkWithHref-kommandoen
RouterLinkWithHref-direktivet
RouterLinkWithHref-direktiv inputegenskab
RouterLinkWithHref-kommandoen
Attributbinding
<a> Tags definerer hyperlinks, der bruges til at linke fra én side til en anden. <a> Der er to vigtige egenskaber i tags:
HREF - Angiver URL-adressen på den side, linket fører til. Hvis du ikke bruger href-attributten, kan du ikke bruge følgende attributter: download, media, rel, target og type attributter.
Mål - angiver, hvordan den linkede side åbnes i browservinduet, og dens parameterværdier er hovedsageligt som følger:
_blank - Indlæs måldokumentet i et nyt browservindue.
_parent - Dette mål får dokumentet til at indlæses i forældrevinduet eller rammesættet, der indeholder den ramme, hyperlinket refererer til. Hvis denne reference er i et vindue eller i en topniveau-ramme, er den ækvivalent med mål-_self.
_self - Værdien af dette mål er standardmålet for alle etiketter, der ikke specificerer et mål <a> , hvilket får måldokumentet til at blive indlæst og vist som kildedokumentet i samme ramme eller vindue. Dette mål er overflødigt og unødvendigt, medmindre det <base> bruges sammen med målattributten i dokumenttitelfanen.
_top - Dette mål får dokumentet til at indlæse vinduet med hyperlinket, og ved at bruge _top mål vil alle inkluderede frames blive slettet og dokumentet indlæst i hele browservinduet.
Begivenhedsbinding
MouseEvent repræsenterer en begivenhed, der opstår, når en bruger interagerer med en pegerenhed (såsom en mus), og almindelige begivenheder inkluderer: klik, dblklik, mouseup og mousedown-begivenheder. MouseEvent-objektet indeholder en knapattribut, der repræsenterer den museknap, brugeren trykker på, og de mulige attributværdier er som følger:
- 0 - Hovedknappen trykkes, hvilket normalt refererer til venstre museknap.
- 1 - Hjælpeknappen trykkes, som normalt henviser til musehjulet.
- 2 - Den anden tast trykkes, som normalt henviser til højre museknap.
- 3 - Den fjerde knap trykkes, som normalt henviser til browserens tilbage-knap.
- 4 - Den femte knap trykkes, som normalt henviser til browserens fremad-knap.
For en mus konfigureret til venstrehåndet brug vil tastetrykkene være det modsatte. I dette tilfælde læses værdien fra højre mod venstre. I eksempelkoden ovenfor tilgår vi også ctrlKey- og metaKey-egenskaberne for MouseEvent-objektet, som indeholder altKey- og shiftKey-egenskaberne ud over disse to egenskaber. Disse egenskaber beskrives nedenfor:
- MouseEvent.ctrlKey - returnerer true, hvis kontroltasten trykkes, når musebegivenheden udløses.
- MouseEvent.metaKey - returnerer true, hvis (Window - ⊞, Mac - ⌘ Command)-tasten trykkes, når musebegivenheden udløses.
- MouseEvent.altKey - Returnerer true, når musebegivenheden udløses, hvis tasten (Window - alt, Mac - Option eller ⌥) trykkes.
- MouseEvent.shiftKey - Returnerer true, hvis shift-tasten trykkes, når en musebegivenhed udløses.
Hvis du trykker ctrlKey og derefter klikker på fanen, <a> oprettes en ny faneside med den nuværende URL-adresse. Hvis du trykker på metaKey og derefter klikker på <a> fanen, vil den aktuelle side blive opdateret. Derfor udføres den tilsvarende vurdering i onClick()-metoden.
RouterLinkWithHref-kommandoens livscyklus
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref-klassen
RouterLinkWithHref-klassen
RouterLinkWithHref-klassen
Introduktion til RouterLinkActive-kommandoen
RouterLinkActive-direktivet tillader dig at tilføje CSS-klasser til et element, når den linkede rute bliver aktiv. Tag et kig på følgende eksempel:
Når URL-adressen er /user eller /user/bob, tilføjes activ-link-klassen <a> til tagget. Hvis URL'en ændres, fjernes active-link-klassen automatisk fra <a> tagget. Du kan også tilføje flere klasser på én gang, som følger:
Når du anvender kommandoen routerLinkActive, kan du også bruge parameteren routerLinkActiveOptions til at konfigurere, hvordan URL'er matches, som følger:
Når parameteren {exact: true} konfigureres, tilføjes den aktive-link-klasse kun til tagget, hvis URL-adressen matcher <a> præcist . Du kan også tildele en RouterLinkActive-instans til en skabelonvariabel og tjekke isActive-status for kommandodirektiverne:
Endelig kan du også anvende RouterLinkActive-kommandoen på forældreelementet i RouterLink. Eksempler inkluderer:
I eksemplet ovenfor, når URL'en adresseres som /user/jim eller /user/bob, tilføjes den aktive link-klasse <div> til det tilsvarende element.
RouterLinkActive kommando forklaret i detaljer
RouterLinkActive-kommandodefinition
RouterLinkActive kommando inputegenskab
RouterLinkActive-kommandolivscyklus
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive-klassen
RouterLinkActive-klassen
RouterLinkActive-klassen
|
Tidligere:Der er en funktion her, som er virkelig god, du kan tjene penge, det er promotion.Næste:Udgivet et DZ online betalingskontrakt-frit plugin, som er tilgængeligt til personlig testning.
|
