Angular 2 - 如何将（单击）事件添加到动态添加的 div [重复]答案

【问题标题】：Angular 2 - How to add (click) event to dynamically added div [duplicate]Angular 2 - 如何将（单击）事件添加到动态添加的 div [重复]
【发布时间】：2016-09-17 00:07:49
【问题描述】：

我尝试通过组件中的一个函数将 div 附加到我的页面中，如下所示：

showTile($event: any,id: number){
       $($event.target).append('<div (click)="somefunction(id)"></div>'))
}

somefunction(id :number){ console.log(id) }

div 已经被某个函数追加了没有被处理，在 angular js 1.x 中我曾经使用 $compile。

【问题讨论】：

如果你只是显示/隐藏一个 div，为什么不直接使用 *ngIf？

标签： javascript jquery angularjs angular angularjs-ng-click

【解决方案1】：

当您的应用程序使用 Angular2 时，您不应使用 jQuery 来影响 DOM 树。总有办法避免这种反模式。

如果我理解正确，您希望在每次点击元素时附加 div。你为什么不为此创建另一个组件？在模板中，使用 *ngIf 指令来显示/隐藏附加内容并将点击事件绑定到@Component，这将切换布尔属性。然后在 父组件 中尽可能多地使用这个组件。如果这些子组件是特定的并且需要父组件中可用的信息，只需@Input 他们。如果你想调用父组件函数，你可以在 child 中使用@Output 然后 - 调用父函数。

在那里你可以读到很多关于这个的 - https://angular.io/docs/ts/latest/cookbook/component-communication.html

【讨论】：

好的，我会看到这个选项，谢谢

【解决方案2】：

component.html 文件内部

<div  *ngIf="condition" (click)="dosomething(data)">
<label >Click here </label>
</div>     
//You div will appear only if condition is true

component.ts 文件内部

dosomething(item){
  console.log(item);
  //do something here
}

【讨论】：

这是静态添加的，而不是动态添加的，即使使用了*ngIf。