在 Angular 组件的文本块中向 link 添加（单击）方法

Question

我有个小问题。我从服务器获取带有插入到 Angular 组件中的 innerHtml 的文本。在本文中，可能有一些链接。示例文本块如下所示：

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

有没有办法在像这样的点击操作中插入绑定？

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

谢谢。

Answer 1

对于动态 link，您可以在 a 标签中绑定您想要的 url link，如下所示

<a [href]="some.url">Link</a>

如果some是一个对象。

对于点击事件你可以有类似的东西

method(url: string) {
  window.location.href = url;
}

然后你将像 (click)="method('http://domain.tld/page.html')"

一样传递你的 url 字符串

Answer 2

如果我没看错，您将使用 innerHtml 呈现从服务器加载的 html，在这种情况下，您不能在此模板内使用 Angular 指令。但是你可以在内容渲染后用普通的JS（document.addEventListener）添加监听器。

@Component({
  template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
  @ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;

  ngAfterViewInit() {
     const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
     links.forEach(link => 
       link.addEventListener('click', this.linkClickHandler.bind(this));
     );
  }

  linkClickHandler(event: MouseEvent) {
    ...
  }
}