|
|
Опубликовано 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
- сохранить — сохранить текущие параметры запроса
- по умолчанию ('') — используйте только параметры запроса
Конкретные примеры использования следующие:
Команда RouterLink подробно объяснения
Определение команды RouterLink
Свойство ввода команд RouterLink
Задайте параметры запроса, связанные с URL
@Input() queryParams: {[k: string]: any};
Установите хеш-фрагмент на URL
@Input() фрагмент: нить;
Задайте режим обработки параметров запроса: объединение, сохранение и по умолчанию
@Input() queryParamsHandling: QueryParamsHandling;
Устанавливает вопрос о сохранении фрагментов
@Input() сохранитьФрагмент: булевый;
При настройке навигации по странице стоит ли добавлять новые статусы в историю
@Input() skiplocatio{filter}nChange: boolean;
При настройке навигации по странице стоит ли заменить текущее состояние в истории
@Input() replaceUrl: boolean;
Задайте команды параметрической информации, например: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
если (команды != null) {
this.commands = Array.isArray(commands) ? команды: [команды];
} else {
this.commands = [];
}
}
Привязка команд RouterLink
Привязка событий
Класс RouterLink
@Attribute()
@Attribute('attributeName') декоратор: используется для получения значения атрибута, соответствующего атрибуту attributeName на элементе командного хоста.
tabindex
Свойство tabindex задаёт порядок управления клавишами tab элемента (когда клавиша tab используется для навигации).
Следующие элементы поддерживают атрибуты tabindex: <a>, <area>, <button><input><object><select> , , и <textarea> .
Синтаксис tabindex:
Класс RouterLink
Класс RouterLink
Команда RouterLinkWithHref
Директива RouterLinkWithHref
Свойство ввода директивы RouterLinkWithHref
Команда RouterLinkWithHref
Привязка атрибутов
<a> Теги определяют гиперссылки, которые используются для перехода с одной страницы на другую. В <a> тегах есть два важных атрибута:
HREF — указывает URL-адрес страницы, на которую ведёт ссылка. Если вы не используете атрибут href, вы не можете использовать следующие атрибуты: загрузка, медиа, rel, target и type атрибуты.
Target — указывает, как открывается связанная страница в окне браузера, и значения её параметров в основном следующие:
_blank - Загрузите целевой документ в новое окно браузера.
_parent - Эта цель заставляет документ загрузиться в родительское окно или набор кадров, содержащий фрейм, на который ссылается гиперссылка. Если эта ссылка находится в окне или в верхнем фреймворке, то она эквивалентна целевой _self.
_self - Значение этой цели является по умолчанию для всех меток, которые не указывают <a> цель , что приводит к загрузке и отображению целевого документа как исходный документ в том же кадре или окне. Эта цель избыточна и не нужна, если <base> не используется с атрибутом цели во вкладке заголовков документа.
_top — Эта цель заставляет документ загрузить окно с гиперссылкой, и с помощью цели _top удаляется все включённые кадры и загрузка документа во всём окне браузера.
Привязка событий
MouseEvent представляет собой событие, возникающее, когда пользователь взаимодействует с указательным устройством (например, мышью), а распространённые события включают: click, 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 меняется, класс активной ссылки автоматически удаляется из <a> тега. Вы также можете добавить несколько классов одновременно, следующим образом:
При применении команды routerLinkActive вы также можете использовать параметр routerLinkActiveOptions для настройки сопоставления URL, следующим образом:
Когда параметр {точно: true} настроен, класс активной ссылки добавляется к тегу только если 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 Online Payment без контракта, который доступен для персонального тестирования.
|
