如何在 HTML 字符串中使用 routerLink？答案

【问题标题】：How can I use a routerLink inside an HTML string?如何在 HTML 字符串中使用 routerLink？
【发布时间】：2019-04-29 18:11:31
【问题描述】：

我有一段很长的文本要在我的应用程序中显示，所以我想使用 HTML 字符串。

// component
description: string = `<p>Hello world. <a routerLink="/home">Click here</a> to go to the home page.</p>`;

// template
<div class="content">
  <div innerHTML="description"></div>
</div>

这可以正确呈现，除了 Angular 删除了 routerLink 部分并且链接不起作用。我曾尝试使用自定义管道将字符串传递给DomSanitizer 函数bypassSecurityTrustHtml()，但 Angular 没有接受语法，也没有将其视为routerLink。

【问题讨论】：

一句忠告，在 2019 年，如果你发现自己在写 innerHTML，那你就错了。
@Stavm 想解释一下为什么？据我了解，这是在 Angular 中嵌入基于字符串的 HTML 所必需的。
这里使用routerLink的目的是什么？你为什么不放一个普通的[href]？
@MauroAguilar 任何人都会使用 routerLink 的相同原因：使用 Angular 路由器激活路径：angular.io/guide/router
你不能。 Angular 指令必须是要由 Angular 编译器编译的模板的一部分。

标签： angular

【解决方案1】：

简短而无用的答案是“你不能”。

说到底，Angular 作为一个框架是以一种高效且易于理解的方式生成和更新 DOM。通过使用innerHtml 绑定，您是在告诉 Angular “我知道我在做什么，只需将此字符串放入 DOM 中”——它在清理真正危险的东西（如 <script> 标签）后会很高兴地这样做。由于您准确地告诉 Angular 应该在 DOM 中包含什么，因此它不需要任何额外的处理（例如解析指令）。

那么，你是如何做到这一点的呢？

您需要使用实际组件，而不是使用innerHtml。重做这可能会很痛苦，但它允许您使用 Angular 绑定和自定义样式。

如果您需要有关特定返工的帮助，我建议您针对该信息提出一个新问题

【讨论】：

【解决方案2】：

相反，您可以定义一个(click) 方法，您可以在该方法上navigate 到所需的路由。

AFAIK，动态呈现的模板不会绑定 routerLink 属性

【讨论】：

【解决方案3】：

如果您绝对不能将其放入 Angular 模板中，则需要动态查询锚点并实例化路由器提供程序以编程方式导航。比如：

constructor(private router: Router, private ref: ElementRef) {}

ngAfterViewInit() {
  const anchors = [...this.ref.nativeElement.querySelectorAll('a')];
  anchors.forEach((a) => a.addEventListener('click', (e) => {
    e.preventDefault();
    this.router.navigate([a.href]);
  }));
}

虽然有点丑……

【讨论】：