Что такое router links?

В Angular маршрутизация — это механизм, который позволяет приложениям с несколькими страницами перемещаться между различными компонентами с помощью ссылок. Одним из основных инструментов для работы с маршрутизацией являются router links.

Router Link

routerLink — это директива Angular, которая позволяет создавать навигацию между различными маршрутами в приложении. Она упрощает процесс отправки пользователя на нужный путь, просто указав имя маршрута вместо того, чтобы создавать обработчики событий.

Как работает routerLink

Директива routerLink применяется к HTML элементам, таким как <a>, и она позволяет переключаться между страницами, которые определены в маршрутизации вашего приложения.

Пример кода

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

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Теперь, чтобы создать ссылки для перемещения между этими двумя компонентами, мы используем routerLink в шаблоне:

<nav>
  <ul>
    <li><a routerLink="/">Главная</a></li>
    <li><a routerLink="/about">О нас</a></li>
  </ul>
</nav>

Особенности использования routerLink

{ path: 'user/:id', component: UserComponent }

<a [routerLink]="['/user', userId]">Профиль пользователя</a>

<a routerLink="/" routerLinkActive="active">Главная</a>
<a routerLink="/about" routerLinkActive="active">О нас</a>

Заключение

Использование routerLink в Angular — это простой и эффективный способ управлять навигацией в приложении с помощью маршрутизации. Понимание того, как он работает, поможет вам создавать более структурированные и удобные веб-приложения. Не забывайте также изучать другие функции маршрутизации, такие как передача параметров и использование routerLinkActive, чтобы улучшить навигацию в вашем приложении.