Как исправить угловую перезагрузку приложения по обычной гиперссылке, когда она вставляется через свойство innerHtml?

Question

У меня есть компонент оповещения, который имеет свойство message.Сообщение может быть текстом с гиперссылкой:

An error occured. <a href="/learn-more">Learn more</>

message вставляется через innerHtml:

<div class="alert-text" [innerHtml]="alert.message"></div>

Когда я нажимаю на ссылку, приложение перезагружается.Что я могу сделать, чтобы это исправить?

Угловой: 7.1.0

Answer 1

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

проверка рабочего образца - https://stackblitz.com/edit/skdroid-innerhtml-routing

пользовательская директива - CustomRouteDirective

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

@Directive({
  selector: '[appCustomRoute]'
})
export class CustomRouteDirective {
  constructor(private el: ElementRef, private router: Router) { }

  @HostListener('click', ['$event'])
  public onClick(event) {
    if (event.target.tagName === 'A') {
      this.router.navigate([event.target.getAttribute('href')]);
      event.preventDefault();
    } else {
      return;
    }
  }

HTML-код - <div appCustomRoute [innerHTML]="sampleHTML"></div>

Answer 2

Попробуйте использовать routerLink вместо href.