|
|
Zveřejněno 25.10.2018 15:52:29
|
|
|

Úvod do příkazů RouterLink
Příkaz RouterLink vám umožní propojit konkrétní část vaší aplikace. Pokud je spojení statické, můžeme příkaz použít následujícím způsobem:
Pokud potřebujete generovat adresy odkazů s dynamickými hodnotami, můžete předat pole segmentů cesty a parametry pro každý segment. Například použití pole ['/team', teamId, 'user', userName, {details: true}] znamená, že chceme vygenerovat odkaz na /team/11/user/bob; detaily=true 。
Více statických segmentů lze sloučit do jednoho, např. ['/team/11/user', userName, {details: true}].
První fragment cesty lze definovat jako /, ./ nebo . / Začátek:
- Pokud začíná na /, trasa začne hledat nahoru od kořenové trasy
- Pokud začíná na ./ nebo není použita, trasa začne hledat nahoru od podcesty, která je aktuálně aktivní pro danou trasu
- Pokud začnete s : / začíná, trasa pokračuje na další úroveň vyhledávání
Parametry dotazu a fragmenty můžete nastavit následujícími způsoby:
Příkaz RouterLink vygeneruje následující odkaz na základě výše uvedených vstupních parametrů: /user/bob#education?debug=true. Kromě toho můžeme deklarovat, jak zpracovat parametry dotazu pomocí vlastnosti queryParamsHanding, dostupné možnosti jsou:
- merge - Sloučení existujících queryParams do aktuálního queryParams
- uchovat - Uložit aktuální dotaz Params
- výchozí ('') - Používejte pouze parametry dotazu
Konkrétní příklady použití jsou následující:
Příkaz RouterLink podrobně vysvětlen
Definice příkazu RouterLink
Vlastnost příkazu RouterLink vstup
Nastavte parametry dotazu související s URL @Input() queryParams: {[k: string]: any};
Nastavte hash fragment na URL @Input() fragment: struna;
Nastavte režim zpracování parametrů dotazu: merge, preserve a výchozí @Input() queryParamsHandling: QueryParamsHandling;
Stanoví, zda si ponechat fragmenty @Input() preserveFragment: boolean;
Při nastavení navigace stránky, zda přidat nové stavy do historie @Input() skiplocatio{filter}nChange: boolean;
Při nastavování navigace stránky, zda nahradit aktuální stav v historii @Input() replaceUrl: boolean;
Nastavte informace o parametrech příkazů, například: ['/user/bob'] @Input() set routerLink(příkazy: any[]|string) { if (příkazy != null) { this.commands = Array.isArray(commands) ? příkazy: [příkazy]; } jinak { this.commands = []; }
}
Příkazové přiřazení RouterLink
Událostní vazba
Třída RouterLink
@Attribute() @Attribute('attributeName') dekorátor: Používá se k získání hodnoty atributu odpovídající názvu atributu Název atributu na elementu hostitele příkazu.
tabindex Vlastnost tabulaturindexu určuje pořadí ovládání tabulátoru pro prvek (když se klávesa tabulátor používá pro navigaci).
Následující prvky podporují atributy tabulátoru: <a>, <area>, <button>, <input><object><select> , , , a <textarea> .
Syntax Tabindex:
Třída RouterLink
Třída RouterLink
Příkaz RouterLinkWithHref
Direktiva RouterLinkWithHref
Vstupní vlastnost direktivy RouterLinkWithHref
Příkaz RouterLinkWithHref
Vazba atributů
<a> Štítky definují hypertextové odkazy, které se používají k propojení z jedné stránky na druhou. <a> V tagech jsou dva důležité atributy:
href - specifikuje URL adresu stránky, na kterou odkaz vede. Pokud nepoužíváte atribut href, nemůžete použít následující atributy: download, media, rel, target a type.
Cíl - specifikuje, jak se propojená stránka otevírá v okně prohlížeče, a její hodnoty parametrů jsou převážně následující:
_blank - Načíst cílový dokument v novém okně prohlížeče.
_parent - Tento cíl způsobí, že se dokument načte do rodičovského okna nebo sady rámců obsahujících rámec odkazovaný hypertextovým odkazem. Pokud je tato reference v okně nebo v rámci nejvyšší úrovně, pak je ekvivalentní cílové _self.
_self - Hodnota tohoto cíle je výchozím cílem pro všechny štítky, které nespecifikují cíl <a> , což způsobí, že cílový dokument se načte a zobrazí jako zdrojový dokument ve stejném rámci nebo okně. Tento cíl je redundantní a zbytečný, pokud <base> není použit s atributem cíl v záložce název dokumentu.
_top - Tento cíl způsobí, že dokument načte okno obsahující hypertextový odkaz a použitím _top targetu se vymažou všechny zahrnuté rámce a dokument se načte v celém okně prohlížeče.
Událostní vazba
MouseEvent představuje událost, která nastane, když uživatel interaguje s ukazatelovým zařízením (například myší), a běžné události zahrnují: klik, dblclick, mouseup a mousedown. Objekt MouseEvent obsahuje atribut tlačítka, který reprezentuje tlačítko myši stisknuté uživatelem, a možné hodnoty atributů jsou následující:
- 0 - Hlavní tlačítko je stisknuto, obvykle odkazující na levé tlačítko myši.
- 1 - Stiskne se pomocné tlačítko, obvykle odkazující na kolečko myši.
- 2 - Stiskne se druhé tlačítko, obvykle odkazující na pravé tlačítko myši.
- 3 - Stiskne se čtvrté tlačítko, obvykle odkazující na tlačítko zpět prohlížeče.
- 4 - Je stisknuto páté tlačítko, které obvykle odkazuje na tlačítko vpřed v prohlížeči.
U myši nakonfigurované pro levou ruku budou stisky kláves opačné. V tomto případě se hodnota čte zprava doleva. V příkladu kódu výše také přistupujeme k vlastnostem ctrlKey a metaKey objektu MouseEvent, které kromě těchto dvou vlastností obsahují vlastnosti altKey a shiftKey. Tyto vlastnosti jsou popsány níže:
- MouseEvent.ctrlKey – vrací true, pokud je stisknuta klávesa control při spuštění události myši.
- MouseEvent.metaKey - vrací true, pokud je při spuštění události myši stisknuta klávesa (Window - ⊞, Mac - ⌘ Command).
- MouseEvent.altKey - Vrátí true, když je spuštěna myš událost, pokud je stisknuta klávesa (Window - alt, Mac - Option, nebo ⌥).
- MouseEvent.shiftKey - Vrátí true, pokud je stisknut klávesa shift při spuštění myši události.
Pokud stisknete ctrlKey a pak kliknete na záložku, <a> vytvoří se nová stránka s aktuální URL adresou. Pokud stisknete metaKey a kliknete na <a> záložku, aktuální stránka se obnoví. Proto se v metodě onClick() provádí odpovídající hodnocení.
Životní cyklus příkazu RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Třída RouterLinkWithHref
Třída RouterLinkWithHref
Třída RouterLinkWithHref
Úvod do příkazu RouterLinkActive
Direktiva RouterLinkActive umožňuje přidávat CSS třídy k prvku, když se propojená trasa stane aktivní. Podívejte se na následující příklad:
Když je URL adresa /user nebo /user/bob, třída active-link bude <a> přidána k tagu. Pokud se URL změní, třída aktivního odkazu je automaticky odstraněna ze <a> štítku. Můžete také přidat více tříd najednou, následovně:
Při aplikaci příkazu routerLinkActive můžete také použít parametr routerLinkActiveOptions k nastavení způsobu párování URL takto:
Když je parametr {exact: true} nastaven, třída active-link je přidána k tagu pouze tehdy, pokud adresa URL přesně odpovídá <a> . Můžete také přiřadit instanci RouterLinkActive k proměnné šablony a direktivně zkontrolovat stav příkazů isActive podle direktiv:
Nakonec můžete také aplikovat příkaz RouterLinkActive na rodičovský prvek RouterLinku. Příklady zahrnují:
V uvedeném příkladu, když je URL adresována jako /user/jim nebo /user/bob, třída aktivního odkazu se <div> přidá k příslušnému prvku.
Příkaz RouterLinkActive podrobně vysvětlen
Definice příkazu RouterLinkActive
Vlastnost příkazu RouterLinkActive
Životní cyklus příkazů RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Třída RouterLinkActive
Třída RouterLinkActive
Třída RouterLinkActive
|
Předchozí:Je tu funkce, která je opravdu dobrá, můžete vydělat peníze, je to propagace.Další:Vydal online plugin DZ bez platebních smluv, který je k dispozici pro osobní testování.
|