|
|
Публикувано в 25.10.2018 г. 15:52:29 ч.
|
|
|

Въведение в командите RouterLink
Командата RouterLink ви позволява да се свържете с конкретна част от вашето приложение. Ако връзката е статична, можем да използваме командата по следния начин:
Ако трябва да генерирате адреси на връзки с динамични стойности, можете да подадете масив от сегменти на пътя и след това параметрите за всеки сегмент. Например, използването на масив от ['/team', teamId, 'user', userName, {details: true}] означава, че искаме да генерираме връзка към /team/11/user/bob; details=true 。
Множество статични сегменти могат да бъдат обединени в един, например ['/team/11/user', userName, {details: true}].
Първият фрагмент от пътя може да бъде дефиниран като /, ./ или . / Начало:
- Ако започва с /, маршрутът ще започне да гледа нагоре от основния маршрут
- Ако започва с ./ или не се използва, маршрутът ще започне да гледа нагоре от дъщерния маршрут, който в момента е активен за маршрута
- Ако започнете с : / започва, маршрутът преминава към следващото ниво на търсене
Можете да зададете параметри и фрагменти на заявката по следните начини:
Командата RouterLink ще генерира следния линк въз основа на зададените по-горе входни параметри: /user/bob#education?debug=true. Освен това можем да обявим как да обработваме параметрите на заявката чрез свойството queryParamsHandling – наличните опции са:
- merge - Обединете съществуващите queryParams с текущите queryParams
- preserve - Запази текущия queryParams
- по подразбиране ('') - Използвайте само параметри за заявки
Конкретни примери за употреба са следните:
Командата RouterLink, обяснена подробно
Определение на команда RouterLink
Свойство за вход на командите RouterLink
Задайте параметрите на заявката, свързани с URL адреса @Input() queryParams: {[k: string]: any};
Задайте хеш фрагмента на URL адреса @Input() фрагмент: нишка;
Задайте режим за обработка на параметрите на заявката: merge, preserve и default @Input() queryParamsHandleling: QueryParamsHandleling;
Определя дали да се пазят фрагменти @Input() запазванеФрагмент: булев;
Когато настройвате навигацията на страницата, дали да добавяте нови статуси към историята @Input() skiplocatio{filter}nChange: boolean;
При настройване на навигацията на страницата, дали да се замени текущото състояние в историята @Input() replaceUrl: boolean;
Задайте информация за параметрите на командите, например: ['/user/bob'] @Input() set routerLink(commands: any[]|string) { ако (командва != null) { this.commands = Array.isArray(commands) ? команди: [команди]; } else { това.команди = []; }
}
Обвързване на команди RouterLink
Свързване на събития
Клас RouterLink
@Attribute() @Attribute('attributeName') декоратор: Използва се за получаване на стойността на атрибута, съответстваща на името на attributeName на елемента на хоста на командата.
Tabindex Свойството tabindex определя реда на контрола на табулаторния клавиш на елемента (когато се използва табулаторният клавиш за навигация).
Следните елементи поддържат атрибутите на tabindex: <a>, <area>, <button>, <input><object><select> , и <textarea> .
Синтаксис на tabindex:
Клас RouterLink
Клас RouterLink
RouterLinkWithHref команда
Директивата RouterLinkWithHref
Свойство за вход на директивата RouterLinkWithHref
RouterLinkWithHref команда
Свързване на атрибути
<a> Таговете дефинират хипервръзки, които се използват за свързване от една страница към друга. <a> Има два важни атрибута в таговете:
HREF - Определя URL адреса на страницата, към която води линката. Ако не използвате атрибута href, не можете да използвате следните атрибути: download, media, rel, target и type атрибути.
Target - Определя как се отваря свързаната страница в прозореца на браузъра, като стойностите на параметрите ѝ са основно следните:
_blank - Заредете целевия документ в нов прозорец на браузъра.
_parent - Тази цел кара документа да се зареди в родителския прозорец или набор от кадри, съдържащ рамката, към която се препраща хипервръзката. Ако тази препратка е във прозорец или в най-горна рамка, тогава тя е еквивалентна на целевата _self.
_self - Стойността на тази цел е по подразбиране за всички етикети, които не посочват <a> целева цел , което кара целевият документ да се зарежда и показва като изходен документ в същия кадър или прозорец. Тази цел е излишна и ненужна, освен <base> ако не се използва с целевия атрибут в таба за заглавие на документа.
_top - Тази цел кара документа да зареди прозореца, съдържащ хипервръзката, и чрез _top целта ще изчисти всички включени кадри и документът ще се зареди в целия прозорец на браузъра.
Свързване на събития
MouseEvent представлява събитие, което се случва, когато потребителят взаимодейства с указателно устройство (като мишка), а често срещаните събития включват: клик, dblclick, mouseup и mousedown събития. Обектът MouseEvent съдържа атрибут на бутона, който представя бутона на мишката, натиснат от потребителя, а възможните стойности на атрибута са следните:
- 0 - Натиска се основният бутон, обикновено отнасящ се до левия бутон на мишката.
- 1 - Натиска се помощният бутон, обикновено отнасящ се до колелцето на мишката.
- 2 - Натиска се вторият бутон, обикновено отнасящ се до десния бутон на мишката.
- 3 - Натиска се четвъртият бутон, обикновено отнасящ се до бутона за връщане в браузъра.
- 4 - Петият бутон се натиска, обикновено отнасящ се до бутона напред в браузъра.
За мишка, конфигурирана за лява ръка, натисканията на клавишите са обратното. В този случай стойността се чете отдясно наляво. В примерния код по-горе имаме достъп и до свойствата ctrlKey и metaKey на обекта MouseEvent, които съдържат свойствата altKey и shiftKey в допълнение към тези две свойства. Тези характеристики са описани по-долу:
- MouseEvent.ctrlKey - връща true, ако клавишът Control се натисне при задействане на събитието с мишката.
- MouseEvent.metaKey - връща true, ако клавишът (Window - ⊞, Mac - ⌘ Command) се натисне при задействане на събитието с мишката.
- MouseEvent.altKey - Връща true, когато се задейства събитието с мишката, ако се натисне клавишът (Window - alt, Mac - Option или ⌥ ).
- MouseEvent.shiftKey - Връща true, ако клавишът shift се натисне при задействане на събитие с мишката.
Ако натиснете ctrlKey и след това кликнете върху табула, <a> ще се създаде нова страница с таб с текущия URL адрес. Ако натиснете metaKey и след това кликнете върху <a> таба, текущата страница ще бъде обновена. Следователно, при метода onClick() се извършва съответната преценка.
Животен цикъл на командата RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Клас RouterLinkWithHref
Клас RouterLinkWithHref
Клас RouterLinkWithHref
Въведение в командата RouterLinkActive
Директивата RouterLinkActive ви позволява да добавяте CSS класове към елемент, когато свързаният маршрут стане активен. Вижте следния пример:
Когато URL адресът е /user или /user/bob, класът active-link ще бъде добавен <a> към тага. Ако URL-то се промени, класът active-link автоматично се премахва от <a> тага. Можете също да добавите няколко класа едновременно, както следва:
При прилагане на командата routerLinkActive можете също да използвате параметъра routerLinkActiveOptions, за да конфигурирате как се съвпадат URL адресите, както следва:
Когато параметърът {точно: true} е конфигуриран, класът active-link се добавя към тага само ако URL адресът съвпада <a> точно . Можете също да присвоите RouterLinkActive инстанция на шаблонна променлива и да проверите isActive статуса на командните директиви директивно:
Накрая, можете също да приложите командата RouterLinkActive към родителския елемент на RouterLink. Примери включват:
В горния пример, когато URL-то е адресирано като /user/jim или /user/bob, класът active-link се добавя <div> към съответния елемент.
Командата RouterLinkActive, обяснена подробно
Определение на команда RouterLinkActive
Входно свойство на команда RouterLinkActive
Жизнен цикъл на командата RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive клас
RouterLinkActive клас
RouterLinkActive клас
|
Предишен:Тук има функция, която е наистина добра – можеш да печелиш пари, това е промоция.Следващ:Пуснахме DZ онлайн плъгин без договор за плащане, който е достъпен за лични тестове.
|