Angular2如何在克隆元素上重新附加click事件？

Question

我有一个用*ngFor创建的表格列表，每个列表项目都有一个隐藏的详细信息div，以及一个显示详细信息按钮。在列表项的末尾，表格div之外我有一个空div，当我点击显示每个表项的详细信息时，我得到它的详细信息div并添加为我的空div的内部html，并为该div设置动画。我的详细信息div有一个按钮，我已将click事件绑定到该按钮，但是当我克隆它时，其click事件未触发。

<li *ngFor="let item of items">
   <div id="item-div">
    .......
    .......
    <button (click)="showDetails($event, item._id)">Show Details</button>
   </div>

   <!--  Item details (hide)  -->
   <div id="item-details" class="item-details-info">
     .........
     .........
     .........
     <button (click)="saveItem(item._id)">Save Item</button>

   </div>

</li>

<!-- Custom popup like div, but its not a popup, its an animated div -->
<div id="custom-animated-div" class="custom-popup">
   <div class="popup-data"></div>
   <div class="popup-close" (click)="closePopup();">
      <i class="material-icons">&#xE5CD;</i>
   </div>
</div>

我的克隆和动画组件代码是：

showDetails (event: any, itemId: string) {
   var target = event.target || event.srcElement || event.currentTarget;
  this.togglePopup(target, itemId);
}

togglePopup(element: any, itemId: string) {
   this.popup = document.querySelector('.custom-popup');
   if (this.popup.classList.contains('active')) {
   this.closePopup();
   setTimeout(this.togglePopup, 600);
}
else {
  setTimeout(() => {
    document.querySelector('.custom-popup').classList.add('active');
    this.cloneInfo(element, itemId);
  }, 100);
  // this.popup.addClass('active');
 }
}


cloneInfo(element: any, jobId: string) {
  var parentElement = $(element).parents('.item-row').find('.item-details-info');
  var self = this;
  setTimeout(() => {
    document.querySelector('.custom-popup').children.item(0).innerHTML = parentElement.html();
    document.querySelector('.custom-popup').children.item(0).classList.add('fadeInUp');

  }, 100);
}

但是当我的动画div克隆其包含的按钮事件不起作用时，我甚至尝试使用addEventListner在克隆函数中添加事件。

Answer 1

我还不能评论，但你应该使用ViewContainerRef和TemplateRef而不是innerHTML，绑定而不是classList.add，一切都会工作。

Answer 2

您可以使用插值{{}}来显示细节

在typescript文件中，您可以创建一个新项目项目，点击showDetails($event, item)即可：

showDetails(item:Item){
this.newitem = item;
//now 
}

在HTML

<div *ngIf="newitem" id="custom-animated-div" class="custom-popup">
   <div class="popup-data"> 
       {{newitem._id}} 
        <br> 
        {{newitem.name}} </div>
        <div class="popup-close" (click)="closePopup();">
        <i class="material-icons">&#xE5CD;</i>
   </div>
</div>