Question

我的应用中要显示一长段文字，因此我想使用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。

Answer 1

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

归根结底，作为一个框架，Angular是关于以有效且可理解的方式生成和更新DOM。通过使用innerHtml绑定，您将告诉Angular“我知道我在做什么，只需将此字符串放入DOM中”-在清除了真正危险的内容（如<script>标签之后，它很高兴地做到了）。由于您是在准确地告诉Angular DOM中应该包含的内容，因此它不会打扰任何其他处理（例如解析指令）。

那么，您如何做到这一点？

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

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

Answer 2

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

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

Answer 3

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

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]);
  }));
}

虽然有点丑陋...

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

3 个答案: