|
|
Zverejnené 25. 10. 2018 15:52:29
|
|
|

Úvod do príkazov RouterLink
Príkaz RouterLink vám umožní prepojiť sa na konkrétnu časť vašej aplikácie. Ak je spojenie statické, môžeme príkaz použiť nasledovne:
Ak potrebujete generovať adresy odkazov s dynamickými hodnotami, môžete odovzdať pole segmentov ciest a potom parametre pre každý segment. Napríklad použitie poľa ['/team', teamId, 'user', userName, {details: true}] znamená, že chceme vygenerovať odkaz na /team/11/user/bob; detaily=true 。
Viacero statických segmentov je možné zlúčiť do jedného, napr. ['/team/11/user', username, {details: true}].
Prvý fragment cesty možno definovať ako /, ./, alebo . / Začiatok:
- Ak začína na /, trasa začne hľadať nahor od koreňovej trasy
- Ak začína na ./ alebo sa nepoužíva, trasa začne hľadať hore od podcesty, ktorá je momentálne aktívna pre danú trasu
- Ak začneš s: / začína, trasa prechádza na ďalšiu úroveň vyhľadávania
Parametre a fragmenty dotazu môžete nastaviť nasledovnými spôsobmi:
Príkaz RouterLink vygeneruje nasledujúci odkaz na základe vyššie nastavených vstupných parametrov: /user/bob#education?debug=true. Okrem toho môžeme deklarovať, ako spravovať parametre dotazu pomocou vlastnosti queryParamsHanding, dostupné možnosti sú:
- merge - Zlúčiť existujúce queryParams do aktuálneho queryParams
- zachovať - Uložiť aktuálny dotaz Params
- predvolené ('') - Používajte iba parametre dotazu
Konkrétne príklady použitia sú nasledovné:
Príkaz RouterLink podrobne vysvetlený
Definícia príkazu RouterLink
Vstupná vlastnosť príkazu RouterLink
Nastavte parametre dotazu súvisiace s URL @Input() queryParams: {[k: string]: any};
Nastavte hash fragment na URL @Input() fragment: reťazec;
Nastavte režim spracovania parametrov dotazu: merge, preserve a default @Input() queryParamsHandling: QueryParamsHandling;
Určuje, či si ponechať fragmenty @Input() preserveFragment: boolean;
Pri nastavovaní navigácie stránky, či pridať nové stavy do histórie @Input() skiplocatio{filter}nChange: boolean;
Pri nastavovaní navigácie stránky, či nahradiť aktuálny stav v histórii @Input() replaceUrl: boolean;
Nastavte parametre príkazov, napríklad: ['/user/bob'] @Input() set routerLink(commands: any[]|string) { ak (príkazy != null) { this.commands = Array.isArray(commands) ? príkazy: [príkazy]; } inak { this.commands = []; }
}
Príkazové viazanie RouterLink
Viazanie udalostí
Trieda RouterLink
@Attribute() @Attribute('attributeName') decorator: Používa sa na získanie hodnoty atribútu zodpovedajúcej atribútovému menu attributeName na hostiteľskom elemente príkazu.
tabindex Vlastnosť tabindex špecifikuje poradie ovládania klávesov tab pre prvok (keď sa kláves tab používa na navigáciu).
Nasledujúce prvky podporujú atribúty tabindex: <a>, <area>, <button>, <input><object><select> , , , , a <textarea> .
Syntax Tabindex:
Trieda RouterLink
Trieda RouterLink
Príkaz RouterLinkWithHref
RouterLinkWithHref direktíva
Vstupná vlastnosť direktívy RouterLinkWithHref
Príkaz RouterLinkWithHref
Viazanie atribútov
<a> Značky definujú hypertextové odkazy, ktoré sa používajú na prepojenie z jednej stránky na druhú. <a> V tagoch sú dva dôležité atribúty:
href - špecifikuje URL adresu stránky, na ktorú odkaz vedie. Ak nepoužijete atribút href, nemôžete použiť nasledujúce atribúty: download, media, rel, target a typ.
cieľ - špecifikuje, ako sa prepojená stránka otvára v okne prehliadača, pričom jej hodnoty parametrov sú hlavne nasledovné:
_blank - Načítajte cieľový dokument v novom okne prehliadača.
_parent - Tento cieľ spôsobí, že sa dokument načíta do rodičovského okna alebo sady rámcov obsahujúcich rámec odkazovaný hypertextovým odkazom. Ak je táto referencia v okne alebo v najvyššej úrovni, potom je ekvivalentná cieľovej _self.
_self - Hodnota tohto cieľa je predvoleným cieľom pre všetky štítky, ktoré nešpecifikujú cieľ <a> , čo spôsobí, že cieľový dokument sa načíta a zobrazí ako zdrojový dokument v tom istom rámci alebo okne. Tento cieľ je redundantný a zbytočný <base> , pokiaľ sa nepoužije s atribútom cieľa v záložke názov dokumentu.
_top - Tento cieľ spôsobí, že dokument načíta okno obsahujúce hypertextový odkaz a použitím cieľa _top vyčistí všetky zahrnuté rámce a dokument sa načíta v celom okne prehliadača.
Viazanie udalostí
MouseEvent predstavuje udalosť, ktorá nastane, keď používateľ interaguje s ukazovateľovým zariadením (napríklad myšou), a bežné udalosti zahŕňajú: kliknutie, dblclick, mouseup a mousedown udalosti. Objekt MouseEvent obsahuje atribút tlačidla, ktorý reprezentuje tlačidlo myši stlačené používateľom, a možné hodnoty atribútov sú nasledovné:
- 0 - Hlavné tlačidlo je stlačené, zvyčajne sa vzťahuje na ľavé tlačidlo myši.
- 1 - Stlačí sa pomocné tlačidlo, ktoré zvyčajne odkazuje na koliesko myši.
- 2 - Druhý kláves sa stlačí, zvyčajne odkazujúci na pravé tlačidlo myši.
- 3 - Stlačí sa štvrté tlačidlo, ktoré zvyčajne odkazuje na tlačidlo späť prehliadača.
- 4 - Stlačí sa piate tlačidlo, ktoré zvyčajne označuje tlačidlo vpred v prehliadači.
Pri myši nakonfigurovanej na ľavácke použitie budú stlačenia kláves opačné. V tomto prípade sa hodnota číta sprava doľava. V príkladovom kóde vyššie pristupujeme aj k vlastnostiam ctrlKey a metaKey objektu MouseEvent, ktoré okrem týchto dvoch vlastností obsahujú vlastnosti altKey a shiftKey. Tieto atribúty sú popísané nižšie:
- MouseEvent.ctrlKey - vráti true, ak je pri spustení udalosti myši stlačené tlačidlo control.
- MouseEvent.metaKey - vráti true, ak sa pri spustení myšovej udalosti stlačí kláves (Window - ⊞, Mac - ⌘ Command).
- MouseEvent.altKey - Vráti true, keď sa spustí udalosť myši, ak je stlačený kláves (Window - alt, Mac - Option, alebo ⌥).
- MouseEvent.shiftKey - Vráti true, ak je kláves shift stlačený pri spustení udalosti myši.
Ak stlačíte ctrlKey a potom kliknete na kartu, vytvorí <a> sa nová stránka karty s aktuálnou URL adresou. Ak stlačíte metaKey a potom kliknete na <a> kartu, aktuálna stránka sa obnoví. Preto sa v metóde onClick() vykoná príslušné hodnotenie.
Životný cyklus príkazu RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Trieda RouterLinkWithHref
Trieda RouterLinkWithHref
Trieda RouterLinkWithHref
Úvod do príkazu RouterLinkActive
Smernica RouterLinkActive vám umožňuje pridať CSS triedy k prvku, keď sa prepojená trasa stane aktívnou. Pozrite sa na nasledujúci príklad:
Keď je URL adresa /user alebo /user/bob, trieda aktívneho odkazu sa <a> pridá k značke. Ak sa URL zmení, trieda aktívneho odkazu sa automaticky odstráni zo <a> značky. Môžete tiež pridať viacero tried naraz, nasledovne:
Pri použití príkazu routerLinkActive môžete tiež použiť parameter routerLinkActiveOptions na nastavenie spôsobu párovania URL, nasledovne:
Keď je parameter {exact: true} nastavený, trieda aktívneho odkazu sa pridá k tagu len vtedy, ak URL adresa presne zodpovedá <a> . Môžete tiež priradiť inštanciu RouterLinkActive k šablónovej premennej a kontrolovať stav príkazových direktív isActive direktivne:
Nakoniec môžete tiež použiť príkaz RouterLinkActive na rodičovský prvok RouterLinku. Príklady zahŕňajú:
V uvedenom príklade, keď je URL adresovaná ako /user/jim alebo /user/bob, trieda aktívneho odkazu sa pridá <div> k zodpovedajúcemu prvku.
Príkaz RouterLinkActive podrobne vysvetlený
Definícia príkazu RouterLinkActive
Vstupná vlastnosť príkazu RouterLinkActive
Cyklus príkazu RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Trieda RouterLinkActive
Trieda RouterLinkActive
Trieda RouterLinkActive
|
Predchádzajúci:Tu je funkcia, ktorá je naozaj dobrá, môžete zarobiť peniaze, je to propagácia.Budúci:Vydal online plugin DZ bez platobných zmlúv, ktorý je dostupný na osobné testovanie.
|