如何在 .ts 中添加（单击）功能

Question

我正在研究一种在 HTML 元素中重写链接的解决方案。

我通过 JSON 字符串“spanClass1”获取 HTML 信息。在这个字符串中，我需要将一个类重写为一个链接。这非常有效。不幸的是，我在 Angular 中使用哈希路由，只能通过 toDocument() 函数进一步链接。它不能通过普通的<a href="link">link name</a> 标签工作

通过span.className.replace(/\D/g, '')，我获得了链接到该页面所需的 ID。

很遗憾，我无法定义包含页面 ID 的 Angular（点击）函数。
另外，我不能操作 .html 中的代码，只能在 .ts 中操作。

document.ts

var div = document.createElement('div');
div.innerHTML = spanClass1;
div.querySelectorAll('[class^=doc-]').forEach(function (span) {
  var anchor = document.createElement('a');
  anchor.href = '/suche#/document/' + span.className.replace(/\D/g, '');
  anchor.href = span.className.split('doc-')[1];
  anchor.innerHTML = span.innerHTML;
  span.parentNode.replaceChild(anchor, span);
});
spanClass1 = div.innerHTML;

toDocument(id) {
  window.open('/suche#/document/' + id);
}

JSON

"spanClass1": "blablablablabla <span class=\"doc-158  \">Radleuchter,</span> blablablabla"

如何将(click)="toDocument(123)" 函数添加到组件内的<a> 标记中。

Answer 1

您似乎想将事件侦听器添加到您在运行时创建的 div。一种可能的方法是使用 Angular 团队提供的Renderer2 API。

在这种情况下，您的代码如下所示：

• 在构造函数中：

  construct(private _renderer2: Renderer2, ...) { ... };
  

• 在你创建 div 的方法中：

    var div = document.createElement('div');
    this._renderer2.listen(div, 'click', (event) => {
      // Code to be run here or callback.
    }
    div.innerHTML = spanClass1;
    ...
  

此外，我建议在直接更改 DOM 时要谨慎。最好为此使用渲染器，因为它附带了更安全且风险更低的内置方法。

Answer 2

您想为每个a 添加一个事件侦听器并侦听click 事件。你的代码有几段我不完全理解，但基本上是这样的：

function toDocument(id) {
  window.open('/suche#/document/' + id);
}

var div = document.createElement('div');
div.innerHTML = spanClass1;  // what is this?
div.querySelectorAll('[class^=doc-]').forEach(function (span) {
  var anchor = document.createElement('a');
  var id = span.className.split('doc-')[1];
  anchor.href = '/suche#/document/' + span.className.replace(/\D/g, '');
  anchor.innerHTML = span.innerHTML;
  anchor.addEventListener('click', function() {
     toDocument(id);
  })
  span.parentNode.replaceChild(anchor, span);
});
spanClass1 = div.innerHTML;