时间戳

首页 > 解决方案 > Angular：编译后将点击事件绑定到元素

angular - Angular：编译后将点击事件绑定到元素

问题描述

我正在使用 Angular 5 为学生开发一个应用程序，用户将能够看到一些文档，当用户进入文档内部时，将显示一组工具，其中一个工具是标记工具，允许用户在文档上标记文本，标记是持久的，因此保存在服务器上，并为文档上的每个标记设置和 id。文档的结构是这样的：

[{
        "chapterId": "254125",
        "title": "Some randome title",
        "blocks": [{
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex fuga magni ea, fugiat rem voluptas odio alias, voluptates doloribus adipisci velit! Ullam, eveniet perferendis. Fugiat quis suscipit ipsa."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex fuga magni ea, fugiat rem voluptas odio alias, voluptates doloribus adipisci velit! Ullam, eveniet perferendis. Fugiat quis suscipit ipsa."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex fuga magni ea, fugiat rem voluptas odio alias, voluptates doloribus adipisci velit! Ullam, eveniet perferendis. Fugiat quis suscipit ipsa."
                }
            }
        ]
    },
    {
        "chapterId": "254125",
        "title": "Another randome title",
        "blocks": [{
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex fuga magni ea, fugiat rem voluptas odio alias, voluptates doloribus adipisci velit! Ullam, eveniet perferendis. Fugiat quis suscipit ipsa."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex fuga magni ea, fugiat rem voluptas odio alias, voluptates doloribus adipisci velit! Ullam, eveniet perferendis. Fugiat quis suscipit ipsa."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex fuga magni ea, fugiat rem voluptas odio alias, voluptates doloribus adipisci velit! Ullam, eveniet perferendis. Fugiat quis suscipit ipsa."
                }
            }
        ]
    }
]

每个块是章节中的一个段落，循环章节和每章的块我自己构建文档（文档示例），现在当我从服务器带回标记时，我得到这个对象：

{
  "id": 20,
  "start": 125,
  "end": 258,
  "color": "red",
  "chapterId": 12631561,
  "blockId": 121651
}

有了这个，我搜索正确的章节和正确的块，将标记放置在文本块的正确位置：

  public placeMarkerOnBlock(chapter, marker): any {
    let tempText: string = '';

    /* Here  we loop the blocks to find the righ
    *  one to place marker.
    */
    chapter.blocks.some((block) => {
      if (marker.blockId === block.blockId) {
        /*
        * Ones the block is founded i place the marker
        */
        const blockText = block.blockElement.text;
        this.counter(blockText, marker, counters);
        counters.endTags += counters.startTags;
        const start = marker.start + counters.startTags;
        const end = marker.end + counters.endTags;

        const textSelected = blockText.substring(start, end);
        tempText += block.blockElement.text.substring(0, start);
        tempText += `<mark class="${marker.color}" alt="${marker.id}">`;
        tempText += textSelected;
        tempText += '</mark>';
        tempText += block.blockElement.text.substring(end);

        block.blockElement.text = tempText;
        tempText = '';

        return false;
      }
    });
    return chapter;
  }

基本上我在这里所做的是从块中获取文本并将其切割成 3 部分，标记之前的文本，标记之后的文本和标记中的文本，然后选择的文本我包裹在mark标签中并粘贴 3再次部分，然后用原始标记替换文本。

现在在所有这些解释之后，我需要做的是附加（绑定）到标记一个(click)=""事件，当用户单击文本中的一个标记时，显示一个带有按钮的小气泡以删除被单击的标记标记和气泡的示例，但我无法做到，因为(click)=""事件基本上是在应用程序的编译过程之后添加到标记中的，有没有其他方法可以实现这一点......？

标签： angulartypescript

解决方案

我想，您面临的问题是因为您试图在 HTML 上附加一个事件，该事件在运行时生成并且本质上是动态的。因此，如果您使用的是 jquery，则可以通过以下方式在动态 HTML 上附加点击事件：-

 $(document).on("click", "a.remove" , function() {
        // write your logic here
    });

其中“a.remove”：-a：动态生成的锚标记，remove：锚上的普通类。

如果你不想使用 jquery 并且你想用 Angular 做所有事情，那么你可以在生命周期钩子中加载你的 HTML，即 ngOnInit() 并且当 HTML 完全加载时，你可以使用 ngAfterViewInit() 创建点击事件在动态生成的 HTML 上。

 ngAfterViewInit(): void {

 // write logic to add click event on generated html
}

 ngOnInit() {
    //load your data here
}

推荐阅读