点击 Angular / Typescript 后动态绑定答案

【问题标题】：Dynamically bind after click in Angular / Typescript点击 Angular / Typescript 后动态绑定
【发布时间】：2018-12-13 16:16:40
【问题描述】：

我有一个文本，我在其中制作了动态标记为跨度的注释。使用“addClickEvent”函数，我添加了一个点击事件，以便用户在点击注释时获得更多信息。在控制台中，我可以在单击后获取所有信息。但我无法将信息与 HTML 绑定。非常感谢您的提示。

HTML

  <div id="description">
   <span class="dictCanon">{{descriptionDictCanon}}</span>
   <span class="coveredText">Covered text: {{descriptionCoveredText}}</span>
   <span class="sectionHeader">Category</span>
   <span class="val">{{descriptionCategory}}</span>
   <span class="sectionHeader">Group</span>
   <span class="val">{{descriptionGroup}}</span>
   <span class="sectionHeader otherSynonyms">Synonyms</span>
   <span class="val">{{descriptionSynonyms}}</span>
  </div>

addClickEvent (obj) {

var rangyRoot = document.getElementById("rangy");
var elems = rangyRoot.getElementsByClassName('marker');

if (elems.length) {
  for (var i = 0, l = elems.length; i < l; i++) {
    (function(i) {
      elems[i].onclick = function() {
        var termToFind = elems[i].innerHTML;
        for (var item in obj) {
          var str = obj[item].coveredText;
          if (str === termToFind) {

             let d = obj[item];

             this.descriptionDictCanon = d.dictCanon;
             this.descriptionCoveredText = d.coveredText;
             this.descriptionCategory = d.parentCategory;
             this.descriptionGroup = d.parentGroup;
             this.descriptionSynonyms = d.otherSynonyms;

            };
          };
        }
      })(i);
    }
  }
}

【问题讨论】：

你做错了，像使用 jQuery 一样使用 Angular。不要通过 ID 获取元素。不要进行 DOM 操作。不要从您的代码中添加事件侦听器。从您的组件中公开一个模型，并使用模板中的指令和绑定（*ngFor、*ngIf、(click) 等）来显示此模型。当你想改变显示的内容时，改变模型，角度会更新视图。
如果你想在 Angular 中进行 DOM 操作。 Angular 有特殊的 API 可以检查这个：angular.io/api/core/Renderer2

标签： angular typescript

【解决方案1】：

<div id="description">
   <span class="dictCanon" (click)="spanCLicked(descriptionDictCanon)">{{descriptionDictCanon}}</span>
.
.
.
  </div>

在你的 ts 中

spanCLicked(item: any)
{
    console.log(item)
}

【讨论】：

对于注释，我使用 rangy。不幸的是，无法将点击事件添加到跨度