Ссылка на внутренний маршрут без перезагрузки из динамически вставленных ссылок с Angular 7

Question

В моем приложении есть механизм, который анализирует фрагмент текста перед рендерингом и заменяет все ссылки, выглядящие как текст, на настоящие ссылки. Это прекрасно работает; однако, даже если я ссылаюсь на внутренний маршрут, приложение перезагружается.

Вот один из примеров.

в шаблоне:

<mat-card-title [innerHtml]="resolveTaskDetailsHtml()"></mat-card-title>

Где разрешающая функция:

public resolveTaskDetailsHtml() {
    return HtmlService.autolinkUrls(escapeHtml(this.details));
  }

Результат это содержимое с замененными URL-адресными строками в реальные ссылки. Кроме того, если ссылка является внутренней, URL-адрес относительно приложения. Пример:

text http://app.domain/route/123

будет заменен на:

text <a href="/route/123">http://app.domain/route/123</a>

Можно ли перенаправить на внутренний маршрут с помощью таких сгенерированных ссылок? И как?

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

Answer 1

Вы должны использовать директиву routerLink вместо href, href обойдет одностраничный характер Angular и полностью перезагрузит страницу, тогда как Angular предпочитает использовать маршрутизатор и его routerLink.

<a [routerLink]="resolveTaskDetailHtml()">

Где теперь должно возвращаться resolveTaskDetailHtml: ['/', 'route', '123']

См. RouterLink для получения дополнительной информации.