无法在 Angular 的 insideHTML 中渲染 routerLink

Question

在组件代码中，我有一个名为 taggy 的字段，其中包含完整的锚标记。起初，在我的 HTML 中，我将其渲染到屏幕上，这当然没有成功，因为我只在逐字版本中看到了 taggy 的内容。文本字面意思是<a href="blopp/1337">hazaa<a>。

一番谷歌搜索后，我发现了我的错误。我应该使用innerHTML。它可以工作，但会导致浏览器重新加载，因为我们使用的是href而不是routerLink。当然，我更改了 taggy 的值，因此它显示routerLink而不是href。然而，当我这样做时，它会起作用，但不完全有效。在我的 HTML 中，我有以下内容。

{{taggy}}
<div [innerHTML]=taggy></div>
<div innerHTML=taggy></div>

这些都不会产生工作链接。最接近的是中间的，因为它创建了一个 div 并在其中创建了一个锚点。但是，锚标记上没有属性，它只包含用户应该阅读的文本。路由信息消失了。

该怎么办？

我找到了一个建议，但感觉不是一个好方法（甚至作者也表示这不是最好的方法）。还有这个，但它与我的情况无关，因为我将字符串传递给另一个组件。

Answer 1

正如您所发现的，您不能在 Angular 中使用动态模板，因为模板与 JavaScript 组件捆绑在一起。如果您想了解更多信息，请查看github 上的这个问题。其结果是：动态模板会破坏 AOT 编译。

您还发现可以将innerHTML对象的 属性设置为任意 HTML，但routerLink在该上下文中不起作用。为什么？因为routerlink是 Angular 指令，而不是 HTML 属性。由于我们只是设置innerHTML，因此它不是编译的模板。

那么，解决办法是什么呢？让我们回过头来思考一下我们routerLink首先在做什么。事实证明，并不多。看一下源码。routerLink具体来说，当单击带有指令的元素时，它会执行以下操作：

@HostListener('click')
onClick(): boolean {
  const extras = {
    skipLocationChange: attrBoolValue(this.skipLocationChange),
    replaceUrl: attrBoolValue(this.replaceUrl),
  };
  this.router.navigateByUrl(this.urlTree, extras);
  return true;
}

它只是用来HostListener监控点击，并进行相应的路由。我们可以在我们的组件中做类似的事情。FooterComponent自从你提到这是一个带有动态 HTML 的页脚以来，我就这么称呼它：

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

@Component({
  selector: 'app-footer',
  template: '<div [innerHTML]="footerHtml"></div>'
})
export class FooterComponent {
  @Input() footerHtml: string = "";

  constructor(private router: Router) { }
  // Watch for clicks in our component
  @HostListener("click", ['$event'])
  onClick(event: MouseEvent) {
    // If we don't have an anchor tag, we don't need to do anything.
    if (event.target instanceof HTMLAnchorElement === false) { 
      return;
    }
    // Prevent page from reloading
    event.preventDefault();
    let target = <HTMLAnchorElement>event.target;
    // Navigate to the path in the link
    this.router.navigate([target.pathname]);
  }
}

正如您所看到的，它接受名为 的输入footerHtml，其类型为字符串。要使用它，我们将在某处添加它：

<app-footer [footerHtml]="footerHtml"></app-footer>

其中footerHtml我们组件中的属性定义如下：

footerHtml = '<p>This is the footer with a <a href="/admin">link!</a></p>';

单击该元素时，我们会检查以确保用户单击了超链接。如果他们这样做了，我们将使用路由器进行导航并阻止默认行为。这是一个有效的 StackBlitz 示例。希望这可以帮助！