|
|
Publisert på 25.10.2018 15:52:29
|
|
|
Introduksjon til RouterLink-kommandoer
RouterLink-kommandoen lar deg koble til en spesifikk del av applikasjonen din. Hvis lenken er statisk, kan vi bruke kommandoen på følgende måte:
Hvis du trenger å generere lenkeadresser med dynamiske verdier, kan du sende et array av stisegmenter og deretter parameterne for hvert segment. For eksempel, ved å bruke et array av ['/team', teamId, 'user', userName, {details: true}] vil vi generere en lenke til /team/11/user/bob; detaljer=true 。
Flere statiske segmenter kan slås sammen til ett, f.eks. ['/team/11/user', userName, {details: true}].
Det første stifragmentet kan defineres som /, ./, eller . / Begynnelse:
- Hvis den starter med /, vil ruten begynne å se opp fra rotruten
- Hvis den starter med ./ eller ikke brukes, vil ruten begynne å slå opp fra den underliggende ruten som for øyeblikket er aktiv for ruten
- Hvis du starter med: / begynner, ruten går til neste nivå av oppslag
Du kan sette spørringsparametere og fragmenter på følgende måter:
RouterLink-kommandoen vil generere følgende lenke basert på inputparametrene satt ovenfor: /user/bob#education?debug=true. I tillegg kan vi erklære hvordan vi skal håndtere spørringsparametere via egenskapen queryParamsHandling, og de tilgjengelige alternativene er:
- merge - Slå sammen eksisterende queryParams til de nåværende queryParams
- preserve - Lagre de nåværende queryParams
- default ('') - Bruk kun spørringsparametere
Spesifikke brukseksempler er som følger:
RouterLink-kommandoen forklart i detalj
Definisjon av RouterLink-kommandoen
RouterLink-kommandoinndataegenskapen
Sett spørringsparametrene relatert til URL-en
@Input() queryParams: {[k: string]: any};
Sett hash-fragmentet på URL-en
@Input() fragment: streng;
Sett behandlingsmodus for spørringsparameteren: slå sammen, bevare og standard
@Input() queryParamsHandling: QueryParamsHandling;
Setter om fragmenter skal beholdes
@Input() bevare Fragment: boolsk;
Når man setter sidenavigasjon, om man skal legge til nye statuser i historikken
@Input() skiplocatio{filter}nChange: boolean;
Når du setter sidenavigasjonen, om du skal erstatte den nåværende tilstanden i historikken
@Input() erstatterUrl: boolean;
Sett kommandoer parameterinformasjon, for eksempel: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
hvis (kommandoer != null) {
this.commands = Array.isArray(commands) ? kommandoer: [kommandoer];
} ellers {
this.commands = [];
}
}
RouterLink-kommandobinding
Hendelsesbinding
RouterLink-klassen
@Attribute()
@Attribute('attributeName') decorator: Brukes til å hente attributverdien som tilsvarer attributtnavnet attributtnavnet på kommandoens vertselement.
tabindex
Tabindex-egenskapen spesifiserer tabulatortastens kontrollrekkefølge for et element (når tabulatortasten brukes til navigasjon).
Følgende elementer støtter tabindex-attributter: <a>, <area>, <button>, <input><object><select> , , , , og <textarea> .
TabIndex-syntaks:
RouterLink-klassen
RouterLink-klassen
RouterLinkWithHref-kommandoen
RouterLinkWithHref-direktivet
Inngangsegenskapen RouterLinkWithHref-direktivet
RouterLinkWithHref-kommandoen
Attributtbinding
<a> Tagger definerer hyperkoblinger som brukes til å lenke fra én side til en annen. <a> Det er to viktige egenskaper i tagger:
HREF - spesifiserer URL-adressen til siden lenken leder til. Hvis du ikke bruker href-attributten, kan du ikke bruke følgende attributter: nedlasting, media, rel, mål og type-attributter.
mål - spesifiserer hvordan den lenkede siden åpnes i nettleservinduet, og parameterverdiene er hovedsakelig som følger:
_blank - Last måldokumentet i et nytt nettleservindu.
_parent - Dette målet får dokumentet til å laste inn i foreldrevinduet eller rammesettet som inneholder rammen som hyperkoblingen refererer til. Hvis denne referansen er i et vindu eller i et toppnivå-rammeverk, er den ekvivalent med mål-_self.
_self - Verdien til dette målet er standardmålet for alle etiketter som ikke spesifiserer et mål <a> , noe som gjør at måldokumentet lastes inn og vises som kildedokumentet i samme ramme eller vindu. Dette målet er overflødig og unødvendig med mindre det <base> brukes sammen med målattributtet i dokumenttittelfanen.
_top - Dette målet får dokumentet til å laste vinduet som inneholder hyperkoblingen, og ved å bruke _top mål vil alle inkluderte rammer slette og laste dokumentet i hele nettleservinduet.
Hendelsesbinding
MouseEvent representerer en hendelse som oppstår når en bruker interagerer med en pekerenhet (som en mus), og vanlige hendelser inkluderer: click, dblclick, mouseup og mousedown-hendelser. MouseEvent-objektet inneholder et knappattributt som representerer museknappen som brukeren trykker på, og de mulige attributtverdiene er som følger:
- 0 - Hovedknappen trykkes, vanligvis med henvisning til venstre museknapp.
- 1 - Hjelpeknappen trykkes, vanligvis med henvisning til musehjulet.
- 2 - Den andre tasten trykkes, vanligvis med henvisning til høyre museknapp.
- 3 - Den fjerde knappen trykkes, vanligvis med henvisning til nettleserens tilbake-knapp.
- 4 - Den femte knappen trykkes, vanligvis med henvisning til nettleserens fremoverknapp.
For en mus konfigurert for venstrehendt bruk, vil tastetrykkene være motsatt. I dette tilfellet leses verdien fra høyre til venstre. I eksempelkoden ovenfor får vi også tilgang til ctrlKey- og metaKey-egenskapene til MouseEvent-objektet, som inneholder altKey- og shiftKey-egenskapene i tillegg til disse to egenskapene. Disse egenskapene beskrives nedenfor:
- MouseEvent.ctrlKey - returnerer true hvis kontrolltasten trykkes når musehendelsen utløses.
- MouseEvent.metaKey - returnerer true hvis (Window - ⊞, Mac - ⌘ Command)-tasten trykkes når musehendelsen utløses.
- MouseEvent.altNøkkel - Returnerer true når musehendelsen utløses hvis (Window - alt, Mac - Option, eller ⌥ ) tasten trykkes.
- MouseEvent.shiftKey - Returnerer true hvis shift-tasten trykkes når en musehendelse utløses.
Hvis du trykker ctrlKey og deretter klikker på fanen, <a> vil en ny faneside bli opprettet med den nåværende URL-adressen. Hvis du trykker på metaKey og deretter klikker på <a> fanen, vil den nåværende siden bli oppdatert. Derfor utføres den tilsvarende vurderingen i onClick()-metoden.
RouterLinkWithHref-kommandolivssyklus
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref-klassen
RouterLinkWithHref-klassen
RouterLinkWithHref-klassen
Introduksjon til RouterLinkActive-kommandoen
RouterLinkActive-direktivet lar deg legge til CSS-klasser i et element når den lenkede ruten blir aktiv. Ta en titt på følgende eksempel:
Når URL-adressen er /user eller /user/bob, vil active-link-klassen bli lagt <a> til taggen. Hvis URL-en endres, fjernes active-link-klassen automatisk fra <a> taggen. Du kan også legge til flere klasser samtidig, som følger:
Når du bruker kommandoen routerLinkActive, kan du også bruke parameteren routerLinkActiveOptions for å konfigurere hvordan URL-er matches, som følger:
Når parameteren {exact: true} konfigureres, legges active-link-klassen bare til taggen hvis URL-adressen matcher nøyaktig <a> . Du kan også tilordne en RouterLinkActive-instans til en malvariabel og sjekke isActive-statusen til kommandodirektivene:
Til slutt kan du også bruke RouterLinkActive-kommandoen på foreldreelementet i RouterLink. Eksempler inkluderer:
I eksempelet ovenfor, når URL-en adresseres som /user/jim eller /user/bob, legges active-link-klassen <div> til det tilsvarende elementet.
RouterLinkActive-kommandoen forklart i detalj
Kommandodefinisjon av RouterLinkActive
RouterLinkActive-kommandoinndataegenskapen
RouterLinkActive-kommandolivssyklus
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive-klassen
RouterLinkActive-klassen
RouterLinkActive-klassen
|
Foregående:Det er en funksjon her som er veldig god, du kan tjene penger, det er promotering.Neste:Lanserte en plugin uten DZ online betalingskontrakt, som er tilgjengelig for personlig testing.
|
