Создание ссылок

Для удобного перехода между различными частями приложения, как правило, применяется система навигации, состоящая из ссылок. К примеру, возьмем проект из прошлой темы и добавим в него навигацию. В этом проекте есть два компонента HomeComponent и AboutComponent, которые обрабатывают различные запросы и результат обработки которых вставляется в шаблон главного компонента - класса AppComponent.

Поэтому определим в AppComponent набор ссылок для навигации:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <nav>
        <a routerLink="">Главная</a>
        <a routerLink="/about">О сайте</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}

Для определения адресов ссылок применяется директива routerLink.

В прошлой теме в модуле AppModule было определено три маршрута:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }
]

В соответствии с первым маршрутом HomeComponent обрабатывает запросы url без сегментов, поэтому для создания ссылки на этот компонент указывается пустая строка: <a routerLink="">.

AboutComponent обрабатывает запросы, которые содержат в адресе about, поэтому ссылка имеет соответствующий адрес: <a routerLink="/about">. В данном случае стоит отметить слеш, с которого начинается адрес. Если мы определяем набор ссылок в главном компоненте (как здесь), то слеш в принципе можно не использовать. Если же ссылки определяются в дочерних компонентах, например, в AboutComponent, то без слеша мы можем получить некорректный путь. Слеш позволяет задать путь относительно корня приложения.

Стилизация активных ссылок

Для стилизации активных ссылок применяется специальная директива routerLinkActive, которая указывает на класс css, применяемый к активной ссылке. Так, изменим класс компонента:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  styles: [
    `
      .active {
        color: red;
      }
    `
  ],
  template: `
    <div>
      <nav>
        <a routerLink="" routerLinkActive="active">Главная</a>
        <a routerLink="/about" routerLinkActive="active">О сайте</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}

В то же время при стилизации следует учитывать следующий момент: если мы нажмем на ссылку "О сайте", то будут стилизованы обе ссылки:

Все дело в том, что путь, представляющий первую ссылку routerLink="", совпадает с url второй ссылки routerLink="/about", так как первый путь можно свести к любому другому пути.

В этом случае нам надо применить дополнительные настройки с помощью директивы routerLinkActiveOptions:

<nav>
  <a
    routerLink=""
    routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}"
    >Главная</a
  >
  <a routerLink="/about" routerLinkActive="active">О сайте</a>
</nav>

Значение {exact:true} указывает на то, что для установки активной ссылки будет применяться полное соответствие:

Но элементы навигации необязательно представляют голые ссылки. Нередко они заключаются в списки, в какие-то блоки. И, возможно, мы захотим стилизовать не просто активную ссылку, а весь элемент, в котором данная ссылка расположена. В этом случае можно применить директиву routerLinkActive к элементу-контейнеру ссылки:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  styles: [
    `
      .nav {
        clear: both;
      }
      a {
        float: left;
      }
      .active a {
        color: red;
      }
    `
  ],
  template: `
    <div>
      <ul class="nav">
        <li
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
        >
          <a routerLink="">Главная</a>
        </li>
        <li routerLinkActive="active">
          <a routerLink="/about">О сайте</a>
        </li>
      </ul>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}