html - 无法在Angular的innerHTML中呈现routerLink

Question

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

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

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

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

怎么办？

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

Answer 1

正如您所发现的，您不能在 Angular 中使用动态模板，因为模板与组件作为 javascript 捆绑在一起。如果您想了解更多信息，请查看 this issue on github .其结果是:动态模板会破坏 AOT 编译。

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

那么，解决方案是什么？让我们回过头来想想 routerLink 首先在做什么。事实证明，并不多。看看the source .具体来说，当单击带有 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>';

当点击元素时，我们会检查以确保用户点击了超链接。如果他们这样做了，我们将使用路由器进行导航并阻止默认行为。这是 working StackBlitz example .希望这会有所帮助!