|
|
Опубліковано 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 - Об'єднати існуючі параметри запиту з поточними параметрами запиту
- preserve - Зберегти поточні параметри запиту
- за замовчуванням ('') - Використовуйте лише параметри запиту
Конкретні приклади використання такі:
Команда RouterLink детально пояснюється
Визначення команди RouterLink
Властивість введення команд RouterLink
Встановіть параметри запиту, пов'язані з URL @Input() queryParams: {[k: string]: any};
Встановіть хеш-фрагмент на URL @Input() фрагмент: нитка;
Встановіть режим обробки параметрів запиту: об'єднання, збереження та стандартне @Input() queryParamsHandling: QueryParamsHandling;
Встановлює, чи зберігати фрагменти @Input() зберегтиФрагмент: булевий;
При налаштуванні навігації сторінками варто додавати нові статуси до історії @Input() skiplocatio{filter}nChange: булевий;
Під час налаштування навігації сторінки варто замінювати поточний стан в історії @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') decorator: Використовується для отримання значення атрибута, що відповідає назві атрибуту 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, ви не можете використовувати такі атрибути: 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 змінюється, клас активного посилання автоматично видаляється з <a> тегу. Ви також можете додати кілька класів одночасно, наступним чином:
При застосуванні команди routerLinkActive ви також можете скористатися параметром routerLinkActiveOptions для налаштування відповідності URL, наступним чином:
Коли параметр {exact: true} налаштовано, клас активного посилання додається до тегу лише якщо URL-адреса точно <a> відповідає . Ви також можете призначити екземпляр RouterLinkActive на змінну шаблону і перевірити статус isActive директив команд директивно:
Нарешті, ви також можете застосувати команду RouterLinkActive до батьківського елемента RouterLink. Прикладами є:
У наведеному вище прикладі, коли URL адресовано як /user/jim або /user/bob, клас active-link <div> додається до відповідного елемента.
Детальне пояснення команди RouterLinkActive
Визначення команди RouterLinkActive
Властивість введення команди RouterLinkActive
Життєвий цикл команди RouterLinkActive
ngПісляКонтентInit()
ngOnChanges()
ngOnDestroy()
Клас RouterLinkActive
Клас RouterLinkActive
Клас RouterLinkActive
|
Попередній:Тут є одна справді хороша функція: можна заробляти гроші, це промоція.Наступний:Випущено плагін DZ Online Payment без контрактів, який доступний для персонального тестування.
|