Question

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

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

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

div已经附加了一些函数未被处理，在角js 1.x我曾经使用$ compile。

Answer 1

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

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

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

Answer 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
}

Angular 2 - 如何添加（单击）事件以动态添加div

2 个答案: