Ця стаття є дзеркальною статтею машинного перекладу, будь ласка, натисніть тут, щоб перейти до оригінальної статті.

Вид: 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 - Об'єднати існуючі параметри запиту з поточними параметрами запиту
  • 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 без контрактів, який доступний для персонального тестування.
Застереження:
Усе програмне забезпечення, програмні матеріали або статті, опубліковані Code Farmer Network, призначені лише для навчання та досліджень; Вищезазначений контент не повинен використовуватися в комерційних чи незаконних цілях, інакше користувачі несуть усі наслідки. Інформація на цьому сайті надходить з Інтернету, і спори щодо авторських прав не мають до цього сайту. Ви повинні повністю видалити вищезазначений контент зі свого комп'ютера протягом 24 годин після завантаження. Якщо вам подобається програма, будь ласка, підтримуйте справжнє програмне забезпечення, купуйте реєстрацію та отримайте кращі справжні послуги. Якщо є будь-яке порушення, будь ласка, зв'яжіться з нами електронною поштою.

Mail To:help@itsvse.com