Tento článok je zrkadlovým článkom o strojovom preklade, kliknite sem pre prechod na pôvodný článok.

Pohľad: 11475|Odpoveď: 0

[Angular] Príkaz Router Link v Angular 4.x

[Kopírovať odkaz]
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.
Vyhlásenie:
Všetok softvér, programovacie materiály alebo články publikované spoločnosťou Code Farmer Network slúžia len na vzdelávacie a výskumné účely; Vyššie uvedený obsah nesmie byť použitý na komerčné alebo nezákonné účely, inak nesú všetky následky používateľmi. Informácie na tejto stránke pochádzajú z internetu a spory o autorské práva s touto stránkou nesúvisia. Musíte úplne vymazať vyššie uvedený obsah zo svojho počítača do 24 hodín od stiahnutia. Ak sa vám program páči, podporte originálny softvér, zakúpte si registráciu a získajte lepšie originálne služby. Ak dôjde k akémukoľvek porušeniu, kontaktujte nás prosím e-mailom.

Mail To:help@itsvse.com