Question

我正在为使用角度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."
                }
            }
        ]
    }
]

每个块是该章中的一个段落，循环遍历该章和每个章的块，我自己构建文档（Document example），现在当我从服务器取回标记时，我得到了这个对象：

{
  "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部分，即标记之前的文本，标记之后的文本和标记中的文本，然后将选定的文本包裹在{{ 1}}标记并再次粘贴3个部分，然后将文本替换为原始标记。

在完成所有这些解释之后，我需要做的是将标记绑定到mark事件上，因为当用户单击文本中的一个标记时，会显示一个带有按钮删除已单击的Example of marker and bubble标记，但我无法执行此操作，因为(click)=""事件基本上是在应用程序的编译过程后添加到标记的，还有其他吗实现这一目标的方法...？

Answer 1

我猜，您面临的问题是因为您试图将事件附加到运行时生成的，本质上是动态的HTML上。因此，如果您使用的是jquery，则可以按以下方式在动态HTML上附加click事件：-

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

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

如果您不想使用jquery并想以角度进行所有操作，则可以将HTML加载到生命周期挂钩中，例如ngOnInit（），并且在HTML完全加载后，可以使用ngAfterViewInit（）进行加载在动态生成的HTML上创建点击事件。

 ngAfterViewInit(): void {

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

 ngOnInit() {
    //load your data here
}

角度：在编译后将click事件绑定到元素

1 个答案: