环境

angular8

问题概述：

前端的html代码是后台数据返回的，前端用了

<div [innerHTML]="caseContent"></div>

去解析，问题为对innerHtml中的代码中的img添加click的点击事件。

解决思路：

• 开始想着替换img标签，将后台返回来的img全都加上click的点击事件，比如：

<img (click)="test()"

实际测试，发现click事件不生效。

• 另外一种解决思路
  主要代码如下
  typescript：

  previewVisible = false;
    previewImage: string;
  constructor(private  el: ElementRef, private renderer: Renderer2) {
    }
  /**
     * 用renderer监测图片点击事件，这块代码放进ngOninit()中就行，只要是页面进行点击，就会触发监听
     */
    monitoreByRenderer() {
        this.renderer.listen(this.el.nativeElement, 'click', (event) => {
            if (event.target.tagName === 'IMG') {
                event.stopPropagation();
                this.previewImage = event.target.currentSrc;
                console.log(this.previewImage);
                this.previewVisible = true;
            }
        });
    }

html:

<nz-modal
        [nzVisible]="previewVisible"
        [nzContent]="modalContent"
        [nzFooter]="null"
        [nzMask]="false"
        (nzOnCancel)="previewVisible = false"
        nzWidth="800px">
    <ng-template #modalContent>
        <img [src]="previewImage" [ngStyle]="{ width: '100%' }"/>
    </ng-template>
</nz-modal>

这是用的renderer2的内容，其实他还有很多功能，需要的可以去官网看一下他的api；
简单解释一下业务场景：点击图片，进行图片的放大预览查看，通过上述代码就可以进行实现。