Angular2：如何获取子组件中 ViewChild 的引用

Question

我有一个组件 ( App)，其中包含另一个组件 ( Comp)。App从数据库获取字符串内容并将其转发@Input()到Comp。该字符串内容可以包含 html 标签，例如

Some text before <a>Click</a> Some Text after

在Comp此内容中应该呈现并且应该添加一些事件侦听器。因此，此内容是使用添加的[innerHtml]。因为需要在对标记的引用(click)中删除，并且应该添加事件侦听器。但我找不到引用该标签的方法，因为组件的 an 不包含.[innerHtml]aaddEventListeneraElementRefnativeElement

让这个笨蛋运行的最佳方法是什么？ https://plnkr.co/edit/xVUu0LJ02YVnBO25Zr4j?p=preview

Answer 1

Angular2 不鼓励直接 DOM 访问

这是一种通过直接 dom 访问来完成此操作的巧妙方法。

在子组件中定义事件监听器并过滤事件：

document.querySelector('body').addEventListener('click', function(event) {
      if (event.target.tagName.toLowerCase() === 'a') {
         that.updateCounter.next(true);
      }
    });

然后使用 anEventEmitter更新计数器。

笨蛋：https://plnkr.co/edit/vm44niH781j4mEQHDpLU ?p=preview