|
|
Objavljeno na 25. 10. 2018 15:52:29
|
|
|
Uvod v ukaze RouterLink
Ukaz RouterLink vam omogoča povezavo na določen del vaše aplikacije. Če je povezava statična, lahko ukaz uporabimo na naslednji način:
Če morate generirati naslove povezav z dinamičnimi vrednostmi, lahko posredujete polje segmentov poti in nato parametre za vsak segment. Na primer, uporaba polja ['/team', teamId, 'user', userName, {details: true}] pomeni, da želimo ustvariti povezavo do /team/11/user/bob; podrobnosti=res 。
Več statičnih segmentov je mogoče združiti v enega, npr. ['/team/11/user', uporabniško ime, {details: true}].
Prvi fragment poti lahko definiramo kot /, ./ ali . / Začetek:
- Če se začne z /, bo pot začela gledati navzgor od korenske poti
- Če se začne z ./ ali ni uporabljena, bo pot začela iskati navzgor iz podpore, ki je trenutno aktivna za to pot
- Če začneš z: / se začne, pot gre na naslednjo stopnjo iskanja
Parametre in fragmente poizvedb lahko nastavite na naslednje načine:
Ukaz RouterLink bo ustvaril naslednjo povezavo na podlagi zgoraj nastavljenih vhodnih parametrov: /user/bob#education?debug=true. Poleg tega lahko preko lastnosti queryParamsHandling določimo, kako obravnavati parametre poizvedbe, razpoložljive možnosti so:
- merge - Združite obstoječe queryParams v trenutni queryParams
- ohrani - Shrani trenutno poizvedboParams
- privzeto ('') - Uporabljajte samo parametre poizvedbe
Specifični primeri uporabe so naslednji:
Ukaz RouterLink je bil podrobno pojasnjen
Definicija ukaza RouterLink
Vhodna lastnost ukaza RouterLink
Nastavite parametre poizvedbe, povezane z URL-jem
@Input() queryParams: {[k: string]: any};
Nastavite hash fragment na URL
@Input() fragment: niz;
Nastavite način obdelave parametrov poizvedbe: merge, preserve in default
@Input() queryParamsHandling: QueryParamsHandling;
Določa, ali ohraniti fragmente
@Input() ohraniFragment: boolean;
Pri nastavljanju navigacije po strani, ali dodati nove statuse v zgodovino
@Input() skiplocatio{filter}nChange: boolean;
Pri nastavljanju navigacije po strani, ali zamenjati trenutno stanje v zgodovini
@Input() replaceUrl: boolean;
Nastavite informacije o parametrih ukazov, na primer: ['/user/bob']
@Input()
nastavi routerLink(ukazi: any[]|string) {
if (ukazi != null) {
this.commands = Array.isArray(commands) ? ukazi: [ukazi];
} else {
this.commands = [];
}
}
Vezava ukazov RouterLink
Vezavo dogodkov
Razred RouterLink
@Attribute()
@Attribute('attributeName') dekorator: Uporablja se za pridobitev vrednosti atributa, ki ustreza imenu atributa Ime na elementu gostitelja ukazov.
tabindex
Lastnost tabindex določa vrstni red nadzora tipke tab za element (ko se tipka tab uporablja za navigacijo).
Naslednji elementi podpirajo atribute tabindex: <a>, <area>, <button>, <input><object><select> , , , in <textarea> .
Sintaksa tabindex:
Razred RouterLink
Razred RouterLink
Ukaz RouterLinkWithHref
Direktiva RouterLinkWithHref
Vhodna lastnost direktive RouterLinkWithHref
Ukaz RouterLinkWithHref
Vezava atributov
<a> Oznake določajo hiperpovezave, ki se uporabljajo za povezovanje z ene strani na drugo. <a> V oznakah sta dve pomembni lastnosti:
href - določa URL naslov strani, na katero vodi povezava. Če ne uporabljate atributa href, ne morete uporabiti naslednjih atributov: download, media, rel, target in type.
Cilj - določa, kako se povezana stran odpre v oknu brskalnika, njene vrednosti parametrov pa so večinoma naslednje:
_blank - Naložite ciljni dokument v novem oknu brskalnika.
_parent - Ta cilj povzroči, da se dokument naloži v nadrejeno okno ali nabor okvirjev, ki vsebuje okvir, na katerega se sklicuje hiperpovezava. Če je ta referenca v oknu ali v vrhunskem okviru, je ekvivalentna ciljni _self.
_self - Vrednost tega cilja je privzeta ciljna vrednost za vse oznake, ki ne določajo cilja <a> , kar povzroči, da se ciljni dokument naloži in prikaže kot izvorni dokument v istem okvirju ali oknu. Ta cilj je odvečen in nepotreben, razen če <base> se uporablja skupaj z atributom cilja v zavihku naslov dokumenta.
_top - Ta cilj povzroči, da dokument naloži okno s hiperpovezavo, uporaba cilja _top pa izbriše vse vključene okvirje in naloži dokument v celotnem oknu brskalnika.
Vezavo dogodkov
MouseEvent predstavlja dogodek, ki se zgodi, ko uporabnik komunicira z napravo kazalca (na primer miško), pogosti dogodki pa vključujejo: klik, dblklik, mouseup in mousedown dogodki. Objekt MouseEvent vsebuje atribut gumba, ki predstavlja gumb miške, ki ga uporabnik pritisne, možne vrednosti atributov pa so naslednje:
- 0 - Glavni gumb je pritisnjen, običajno se nanaša na levi gumb miške.
- 1 - Pritisni se pomožni gumb, običajno se nanaša na kolešček miške.
- 2 - Pritisne se druga tipka, običajno se nanaša na desni gumb miške.
- 3 - Pritisne se četrti gumb, običajno se nanaša na gumb za nazaj v brskalniku.
- 4 - Pritisne se peti gumb, običajno se nanaša na gumb za naprej v brskalniku.
Pri miški, ki je nastavljena za levičarsko uporabo, bodo pritiski tipk ravno nasprotni. V tem primeru se vrednost bere od desne proti levi. V zgornjem primeru kode dostopamo tudi do lastnosti ctrlKey in metaKey objekta MouseEvent, ki poleg teh dveh lastnosti vsebujejo lastnosti altKey in shiftKey. Te lastnosti so opisane spodaj:
- MouseEvent.ctrlKey - vrne true, če je tipka control pritisnjena ob sprožitvi dogodka miške.
- MouseEvent.metaKey - vrne true, če je ob sprožitvi dogodka miške pritisnjena tipka (Window - ⊞, Mac - ⌘ Command).
- MouseEvent.altKey - Vrne true, ko se sproži dogodek miške, če je pritisnjena tipka (Window - alt, Mac - Option ali ⌥).
- MouseEvent.shiftKey - Vrne true, če je tipka shift pritisnjena, ko se sproži dogodek miške.
Če pritisnete ctrlKey in nato kliknete zavihek, se <a> ustvari nova stran z zavihkom z trenutnim URL naslovom. Če pritisnete metaKey in nato kliknete na <a> zavihek, se bo trenutna stran osvežila. Zato se v metodi onClick() izvede ustrezna presoja.
Življenjski cikel ukazov RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Razred RouterLinkWithHref
Razred RouterLinkWithHref
Razred RouterLinkWithHref
Uvod v ukaz RouterLinkActive
Direktiva RouterLinkActive vam omogoča dodajanje CSS razredov elementu, ko povezana pot postane aktivna. Oglejte si naslednji primer:
Ko je URL naslov /user ali /user/bob, se razred active-link doda <a> oznaki. Če se URL spremeni, se razred aktivne povezave samodejno odstrani iz <a> oznake. Lahko dodate tudi več razredov hkrati, kot sledi:
Pri uporabi ukaza routerLinkActive lahko uporabite tudi parameter routerLinkActiveOptions za konfiguracijo ujemanja URL-jev, kot sledi:
Ko je parameter {exact: true} konfiguriran, se razred active-link doda oznaki le, če naslov URL natančno ustreza <a> . Lahko tudi dodelite instanco RouterLinkActive predlogi spremenljivki in direktivno preverite status ukazov isActive:
Nazadnje lahko ukaz RouterLinkActive uporabite tudi na nadrejenem elementu RouterLinka. Primeri vključujejo:
V zgornjem primeru, ko je URL naslovljen kot /user/jim ali /user/bob, se razred active-link doda <div> ustreznemu elementu.
Ukaz RouterLinkActive je podrobno pojasnjen
Definicija ukaza RouterLinkActive
Lastnost vnosa ukaza RouterLinkActive
Življenjski cikel ukazov RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Razred RouterLinkActive
Razred RouterLinkActive
Razred RouterLinkActive
|
Prejšnji:Tu je funkcija, ki je res dobra, lahko zaslužiš denar, to je promocija.Naslednji:Izdal sem DZ spletni vtičnik brez plačilnih pogodb, ki je na voljo za osebno testiranje.
|
