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

Question

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

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

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

不幸的是，我无法定义包含页面 ID 的 Angular（单击）函数。
此外，我无法操作 .html 中的代码，只能在 .ts 中操作。

文档.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>

标签： javascriptangulartypescript

Answer 1

您想为每个事件添加一个事件侦听器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;