时间戳

首页 > 解决方案 > 添加（单击）方法以链接 Angular 组件中的文本块

html - 添加（单击）方法以链接 Angular 组件中的文本块

问题描述

我有一个小问题。我正在从服务器获取带有插入到 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.

谢谢。

标签： htmlangularoverriding

解决方案

如果我猜对了，您可以使用 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) {
    ...
  }
}

推荐阅读