Question

我需要转换html，在图像上添加load事件并在此事件中做一些工作。所以我使用管道。

问题是加载事件中的数据进程没有反映在显示的html上。

我可能错过了一些东西，这是我的处理方式。

在模板中，我添加了我的管道PipeArticleContentToHtml：

    <div class="articleContent" 
[innerHTML]="selectedArticle.content | PipeArticleContentToHtml"></div>

管：

    @Pipe({ name: 'PipeArticleContentToHtml' })
export class PipeArticleContentToHtml implements PipeTransform {
    transform(content: string) {

        let htmlContent = document.createElement('div');

        htmlContent.innerHTML = content;
        let arrayImg = htmlContent.getElementsByTagName('img'); 

        for (let i = 0; i < arrayImg.length; i++) {
            let img = arrayImg[i];

            if (img.src.indexOf('zzzzzz.com') > -1) > -1) {
                img.className = "contentHideImg";
                // this one work
            }
            else {
                img.addEventListener('load', () => {
                    img.className = "FullImg";
                    // this one does not work, className is not changed in the view
                });

                img.addEventListener('error', () => {
                    img.className = "contentHideImg";
                    // this one does not work
                });
            }
        }
        return htmlContent.outerHTML;
    }

显示的html中不存在load事件中的处理。我认为对图像的引用会丢失，因为我将htmlContent.outerHTML返回给视图。

但我不知道如何解决这个问题或其他方式。我们可以使用添加的事件返回html吗？

或者我如何在视图中直接使用html？

感谢您的帮助。

Angular 2 - 管道转换html并将事件添加到图像

0 个答案: