Цель этой статьи — быстро продемонстрировать, как использовать систему маршрутизации в Angular 5.

Возможно, вы находитесь в такой точке своего проекта, когда у вас есть несколько представлений компонентов, но нет возможности перейти к ним. Этот урок покажет вам, как это сделать.

Я создам это с нуля, чтобы вы могли легко следовать за мной.

Создадим новый проект

ng new routing-demo

Просто чтобы иметь приличные стили, добавьте Twitter Bootstrap в файл index.html в теге элемента head.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Теперь давайте создадим некоторые компоненты для работы с

ng g c home --spec false

Этот ярлык создаст новый компонент с именем home и оставит тестовый файл, поскольку в этом примере мы не будем его тестировать.

Давайте повторим

ng g c about --spec false
ng g c contact --spec false

Теперь в папке нашего приложения у нас есть 3 новые папки с именами, указанными выше. Итак, теперь мы можем добавить код в эти шаблоны, чтобы знать, с какой страницей мы имеем дело. Сначала давайте поместим контейнер Bootstrap вокруг директивы app-root в файле index.html.

<div class="container">
   <app-root></app-root>
</div>

Если это сработало правильно, при запуске ng serve вы должны увидеть стили начальной загрузки в тексте.

Теперь давайте перейдем к компоненту Home и заменим тег ‹p› на ‹h1›, чтобы он стал больше. Повторите это для двух других компонентов.

Теперь мы можем настроить маршрутизацию. Посмотрите лучшие практики для этого из документации Angular.

Лучшей практикой Angular является загрузка и настройка маршрутизатора в отдельном модуле верхнего уровня, предназначенном для маршрутизации и импортируемом пользователем root AppModule.

По соглашению имя класса модуля — AppRoutingModule, и он принадлежит app-routing.module.ts в папке src/app.

angular.io

Мы сделаем это, снова используя CLI:

ng generate module app-routing --flat --module=app
--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule.

Теперь нам нужно открыть файл app-routing.module.ts и импортировать нужные нам модули для маршрутизации и удалить ненужный нам код. Вот как должен выглядеть ваш файл, когда вы закончите.

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router';  
@NgModule({   
  exports: [ RouterModule ] }) 
export class AppRoutingModule {}

Добавить маршруты

Типичный маршрут Angular — это объект с двумя свойствами.

  1. path: строка, соответствующая URL-адресу в адресной строке браузера.
  2. component: компонент, который должен создать маршрутизатор при переходе на этот маршрут.

Для маршрутизации к нашим компонентам мы должны импортировать их в файл маршрутизации, чтобы мы могли направлять наши маршруты к этим представлениям.

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

Теперь мы можем создать наши маршруты:

const routes: Routes = [   
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

Теперь нам нужно инициализировать маршрутизатор, чтобы он слушал изменения браузера. В @NgModule добавьте массив импорта со следующим кодом.

imports: [ RouterModule.forRoot(routes) ],

Метод называется forRoot(), потому что вы настраиваете маршрутизатор на корневом уровне приложения. Метод forRoot() предоставляет поставщиков услуг и директивы, необходимые для маршрутизации, и выполняет начальную навигацию на основе текущего URL-адреса браузера.

Добавить RouterOutlet

Теперь нам нужно добавить выход маршрутизатора в наш файл app.component.html, чтобы мы могли видеть наши компоненты, которые маршрутизируются.

<router-outlet></router-outlet>

Теперь, если вы запустите ng serve и перейдете к http://localhost:4200/home, вы должны увидеть нашу домашнюю страницу с большим h1 на экране, который читает домашние работы! Теперь вы можете сделать то же самое для about и contact.

Мы успешно добавили маршрутизацию в наше приложение.

Я мог бы остановиться на этом, но мы не хотим, чтобы нашим пользователям приходилось вводить полный адрес, поэтому давайте добавим несколько навигационных ссылок.

Добавьте навигационную ссылку (routerLink)

Сначала мы добавим панель навигации со стилями Bootstrap в app.component.html.

<nav>
  <ul class="nav justify-content-center">
    <li class="nav-item">
     <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>
<main>
  <router-outlet></router-outlet>
</main>

Теперь нам нужно добавить привязку к нашим компонентам внутри тега привязки. Для этого мы используем routerLink.

<a routerLink="/homes">Heroes</a>

Теперь наш файл app.component.html должен выглядеть так:

<nav>
  <ul class="nav justify-content-center">
    <li class="nav-item">
     <a class="nav-link active" routerLink="/home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/contact">Contact</a>
    </li>
  </ul>
</nav>
<main>
  <router-outlet></router-outlet>
</main>

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

Итак, наш функциональный модуль маршрутизации почти готов. Нам просто нужно позаботиться о двух крайних случаях.

Нам нужно установить маршрут по умолчанию, когда пользователь впервые посещает наше приложение, и нам нужно установить маршрут с подстановочными знаками, когда они вводят несуществующий маршрут. Маршрут с подстановочными знаками подходит для компонента 404 страница не найдена.

Добавьте эти два маршрута в конец наших маршрутов.

{ path: '', redirectTo: '/home', pathMatch: 'full'   },   
{ path: '**', component: HomeComponent }

Теперь, когда кто-то посещает нашу страницу, он начинает с нашей домашней страницы, и если мы хотим, мы можем создать компонент PageNotFound для создания страницы с ошибкой 404. Я просто решил отправить пользователей обратно на домашнюю страницу для этой демонстрации.

Наш окончательный файл app-routing-module.ts выглядит так:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
const routes: Routes = [   
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full'   },   
  { path: '**', component: HomeComponent }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Я надеюсь, что эта демонстрация поможет вам добавить навигацию в ваш проект. Скоро мы углубимся в маршрутизацию, так что следите за обновлениями.