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

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

В прошлой теме в файле app.config.ts было определено три маршрута:

import { ApplicationConfig } from "@angular/core";
import { provideRouter, Routes } from "@angular/router";

import {HomeComponent} from "./home.component";
import {AboutComponent} from "./about.component";
import {NotFoundComponent} from "./not-found.component";

// определение маршрутов
const appRoutes: Routes =[
    { path: "", component: HomeComponent},
    { path: "about", component: AboutComponent},
    { path: "**", component: NotFoundComponent}
];

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(appRoutes)]
};

Компоненты HomeComponent и AboutComponent обрабатывают различные запросы и результат обработки которых вставляется в шаблон главного компонента - класса AppComponent.

Теперь добавим в проект навигацию. Для этого определим в компоненте AppComponent набор ссылок для навигации:

import { Component} from "@angular/core";
import { RouterOutlet, RouterLink} from "@angular/router";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [RouterOutlet, RouterLink],
    styles: `a {padding: 5px;}`,
    template: `<div>
                    <nav>
                        <a routerLink="">Главная</a>
                        <a routerLink="/about">О сайте</a>
                    </nav>
                    <router-outlet></router-outlet>
               </div>`,
})
export class AppComponent {}

Для определения адресов ссылок применяется директива routerLink, которая импортируется из пакета "@angular/router".

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

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

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

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

import { Component} from "@angular/core";
import { RouterOutlet, RouterLink, RouterLinkActive} from "@angular/router";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [RouterOutlet, RouterLink, RouterLinkActive],
    styles: `a {padding: 5px;}
            .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} указывает на то, что для установки активной ссылки будет применяться полное соответствие: