Question

我有一个包含另一个组件（App）的组件（Comp）。 App从数据库中获取字符串内容，并将其@Input()转发给Comp。此字符串内容可以包含html标记，如

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

在Comp中，应该呈现此内容，并且应该添加一些事件侦听器。因此，使用[innerHtml]添加此内容。由于在(click)中删除了[innerHtml]，因此需要对a标记的引用，并且应该在addEventListener添加事件侦听器。但我无法找到引用a代码的方法，因为ElementRef到某个组件并不包含nativeElement。

让这个羽毛球运动的最佳方法是什么？ https://plnkr.co/edit/xVUu0LJ02YVnBO25Zr4j?p=preview

Answer 1

Angular2

中不鼓励直接访问DOM

这是一种通过直接dom访问来实现这一目标的黑客方式。

在子comp中定义一个事件监听器并过滤事件：

$data = $parsedJSON->response->venue;
echo $data->response->venue->popular->timeframes->
  lun /* doesn't work */
  ->open[0]->renderedTime;

然后使用document.querySelector('body').addEventListener('click', function(event) { if (event.target.tagName.toLowerCase() === 'a') { that.updateCounter.next(true); } });更新计数器。

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

Answer 2

在Angular2中，您希望使嵌套组件仅与其直接父/子进行通信。

您可以为＆＃34; a＆＃34;创建一个点击处理程序。组件中的标记＆＃34; Comp＆＃34;。

在你的组件Comp中，你可以创建一个@Output（）变量（基本上是一个EventEmitter），你将在你的点击处理程序中触发

在主应用程序组件中，您可以收听新的EventEmitter并处理该事件。

例如：

在Comp中

：

@Output myClickEventEmitter: EventEmitter

aTagClickHandler (e) {
    myClickEventEmitter.emit(e)
}

在App模板中

App组件中的

：

myCompClickHandler(e) {
    console.log(e);
}

我希望我的语法在这里是正确的，并且它有所帮助。

编辑：

您还应该能够使用标记中的#variableName属性引用内部组件，如下所示：

模板中的

：

<a #variableName > </a>

组件中的

：

@ViewChild('variableName') myATag;

Angular2：如何在子组件

2 个答案: