当通过 innerHtml 属性插入正常超链接时，如何修复 angular 应用程序重新加载？

Question

我有一个具有 message 属性的警报组件。该消息可能是一些带有 hyperlink 的文本：

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

message是通过innerHtml插入的：

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

当我单击 link 时，它会重新加载应用程序。我该怎么做才能解决这个问题？

Angular: 7.1.0

Answer 1

innerHTML 不绑定任何 angular 事件，这就是它不起作用的原因要使其工作，您需要创建负责路线导航的自定义指令。

检查工作样本 - 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>

当通过 innerHtml 属性 插入正常超链接时，如何修复 angular 应用程序重新加载？

How to fix angular app reloading on normal hyperlink when it is inserted via innerHtml property?

innerhtml

hyperlink

angular

当通过 innerHtml 属性插入正常超链接时，如何修复 angular 应用程序重新加载？