Тази статия е огледална статия за машинен превод, моля, кликнете тук, за да преминете към оригиналната статия.

Изглед: 11475|Отговор: 0

[Ъглова] Команда Angular 4.x Router Link

[Копирай линк]
Публикувано в 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 онлайн плъгин без договор за плащане, който е достъпен за лични тестове.
Отричане:
Целият софтуер, програмни материали или статии, публикувани от Code Farmer Network, са само за учебни и изследователски цели; Горното съдържание не трябва да се използва за търговски или незаконни цели, в противен случай потребителите ще понесат всички последствия. Информацията на този сайт идва от интернет, а споровете за авторски права нямат нищо общо с този сайт. Трябва напълно да изтриете горното съдържание от компютъра си в рамките на 24 часа след изтеглянето. Ако ви харесва програмата, моля, подкрепете оригинален софтуер, купете регистрация и получете по-добри услуги. Ако има нарушение, моля, свържете се с нас по имейл.

Mail To:help@itsvse.com