Введение
Angular приложения очень распространены в наши дни. Они построены на концепции одностраничных приложений (SPA). В таких приложениях маршрутизация по веб-страницам отличается от традиционных веб-сайтов, поскольку используются компоненты. В Angular вам нужно использовать RouterLink для навигации по приложению. RouterLink — это директива, и она предоставляет методы Router.navigate и Router.navigateByURL для навигации по классам компонентов.
В этом руководстве мы рассмотрим RouterLink, Router.navigate, и Router.navigateByURL вместе с примерами кода.
RouterLink
В HTML ссылка обычно вставляется с помощью тега якоря <a> как показано ниже:
|
1 2 3 |
<a href="/sample"> Пример HTML-ссылки. </a> |
Эта ссылка-пример переведет пользователя на страницу /sample. Однако, как упоминалось выше, одностраничное приложение (SPA) не имеет разных страниц для перехода. Вместо этого оно имеет различные представления или компоненты для отображения пользователю.
Если вам нужно разрешить пользователю перемещаться и менять представление, вам придется использовать директиву RouterLink вместо href:
|
1 2 3 |
<a routerLink="/users/example"> Ссылка, использующая строку. </a> |
Этот пример RouterLink приведет пользователя к компоненту по адресу /users/example. Различные сегменты URL также могут быть переданы в массиве, как в следующем примере:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Пример ссылки с использованием массиваwith an array. </a> |
Эти два примера отформатированы по-разному, но все равно будут направлять на один и тот же компонент по адресу /users/example.
-
Относительный путь
RouterLink позволяет указывать относительные URL-адреса. Мы можем использовать ../ для перехода на более высокие уровни навигации. Ниже показано, как мы можем этого добиться:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Ссылка, которая ведет на уровень выше. </a> |
В приведенном выше примере, если пользователь находится по адресу /users/posts, навигация приведет пользователя к /posts/parent. Вы также можете указывать URL-адреса относительно, используя ./, ../, или даже без ведущего слэша, если это необходимо.
-
Параметры
Могут возникнуть сценарии, когда вам нужно передать данные между маршрутами. Простой пример — когда пользователь заполняет форму, и вы перенаправляете его к следующей части формы для получения дополнительных сведений.
Для передачи параметров в список сегментов URL передается объект, инкапсулирующий данные:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Ссылка с параметром. </a> |
Выше Router перейдет к /users;display=sample/xyz.
-
Именованные выходы
Именованные выходы роутера — это просто выходы роутера с именами. Давайте посмотрим на код для этого:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Ссылка с боковым выходом (side outlet). </a> |
В этом примере сегмент xyz будет помещен в выход с именем side. Мы также можем указать несколько именованных выходов, как показано ниже:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Ссылка с первым и вторым выходами. </a> |
Это заменит сегмент first на abc , а сегмент second будет заменен на xyz.
Router
В Angular Router класс используется для определения маршрутов и навигации по ним. Это достигается с помощью двух методов: Router.navigate и Router.navigateByUrl. Оба этих метода возвращают промис. Этот промис может иметь три значения: true, false, или null.
-
Значение равно true, когда навигация успешна.
-
Значение равно null, когда навигация отсутствует.
-
И false, если по какой-то причине навигация не удалась.
Если вы хотите, чтобы эти методы были доступны в вашем приложении, вам сначала нужно импортировать класс Router в класс вашего компонента:
|
1 |
import { Router } from '@angular/router'; |
Затем вам нужно внедрить этот Router в конструктор в качестве зависимости:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
После этой настройки вы готовы использовать методы Router.navigate и Router.navigateByUrl в вашем приложении.
Router.navigate
Метод Router.navigate принимает массив сегментов URL. Давайте рассмотрим простой пример кода Router.navigate:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Наконец, давайте рассмотрим Router.navigateByUrl. Этот метод похож на Router.navigate, но вместо массива сегментов URL он принимает строку, задающую URL. Эта навигация должна быть абсолютной и должна начинаться с / в начале:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Приведенный выше код перенаправит пользователя на страницу /users;all=true.
Заключение
В этом руководстве мы рассмотрели, как осуществлять навигацию в приложениях Angular с помощью RouterLink. Маршрутизация в приложениях Angular немного отличается от традиционных веб-приложений, поскольку они являются одностраничными (Single-Page). Знание RouterLink и его функций поможет разработчикам создавать надежную маршрутизацию.
Приложения Angular используют Node.js в качестве среды выполнения. Если вы хотите узнать больше о Node.js и о том, как развертывать приложения Node.js, вы можете ознакомиться со следующими руководствами:
- Как установить Node.js на Ubuntu 18.04
- Настройка приложений Node.js: как выполнять производственные задачи на Ubuntu 20.04 с помощью Node.js
- Как развернуть приложение Node.js (Express.js) с помощью Docker на Ubuntu 20.04
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.