Как повесить на все href аналогичный router-link?

Angular предлагает несколько способов повесить аналогичное router-link на все href в приложении. Один из самых простых способов - это использование директивы, которая будет применяться ко всем элементам с атрибутом href.

Вот пример, который покажет, как создать такую директиву:

import { Directive, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[routerLinkEquivalent]'
})
export class RouterLinkEquivalentDirective {
  constructor(private router: Router) {}

  @HostListener('click', ['$event'])
  onClick(event: Event) {
    event.preventDefault();
    const href = (event.target as Element).getAttribute('href');

    if (href) {
      this.router.navigateByUrl(href);
    }
  }
}

В данном примере мы создали директиву с именем RouterLinkEquivalentDirective. Она принимает в конструкторе экземпляр Router, который мы будем использовать для навигации.

Затем мы добавили декоратор @HostListener к методу onClick, который будет вызываться при каждом клике на элемент с атрибутом href, а также передавать событие click в метод.

В методе onClick мы предотвращаем стандартное поведение клика с помощью event.preventDefault(). Затем мы получаем значение атрибута href из события click и передаем его в метод navigateByUrl экземпляра Router.

Теперь, чтобы использовать эту директиву, достаточно добавить атрибут routerLinkEquivalent к любому элементу с атрибутом href в шаблоне:

<a href="/example" routerLinkEquivalent>Go to Example</a>

Таким образом, при клике на эту ссылку будет производиться навигация по маршруту "/example" с использованием механизма маршрутизации Angular. Этот подход позволяет автоматически навешивать аналогичное поведение router-link на все ссылки в приложении без необходимости повторения кода для каждой ссылки.