Question

我有一个使用可观察对象的组件，它调用服务进行API调用。该API返回一些HTML，这些HTML在视图中呈现。

HTML看起来像这样：

<p>abc</p><a href=\"http://abc.xyz.com/\" class=\"external-link\" rel=\"nofollow\">
Click me to open in new window</a>

在Angular中，是否可以添加一些JS，以便在新窗口或标签中打开带有“ external-link”类的锚点？

Answer 1

如果外部链接出现在组件模板中的某个位置，则可以简单地创建一个指令来定位它们：

@Directive({
  selector: '.external-link'
})

但是听起来好像HTML在这里动态插入。在这种情况下，Angular将无法编译HTML以应用指令。

您可以利用事件委派的优势，并在某些父组件上捕获click事件。您可以捕获任何指向外部链接的点击事件，并添加target="_blank"：

@HostListener('click', ['$event'])
onClick({ target }) {
  if (target.classList.contains('external-link')) {
    target.setAttribute('target', '_blank');
  }
}

StackBlitz example.

Angular 5-在新窗口中打开带有CSS类的链接

1 个答案: