当通过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>