克隆的 DOM 结构上的 Angular 5 点击事件未触发答案

【问题标题】：Angular 5 click event on cloned DOM structure not triggering克隆的 DOM 结构上的 Angular 5 点击事件未触发
【发布时间】：2018-11-21 13:37:09
【问题描述】：

所以我有一个隐藏的 DOM 结构，我会在单击按钮时显示它（添加一些输入字段）。现在，如果不再需要，我还想删除这些输入字段。这是我用 jQuery 克隆的结构：

<ul id="CTcontainer" class='hidden removeContainer'>
  <li>
    <label>Content Type Name:</label>
    <input class="json-input" type="text" name="CT_name">
  </li>
  <li>
    <label>Content Type Group:</label>
    <input class="json-input" type="text" name="CT_group">
  </li>
  <li *ngIf="contentTypeArray.length != '0'">
    <label>Inherit from Content Type:</label>
    <select class="json-input" name="CT_contentTypeInherit">
      <option *ngFor="let ct of contentTypeArray">{{ ct.name }}</option>
    </select>
  </li>
  <li>
    <button type="button" class="btnSubmit" (click)="removeThisCT($event)">Remove these ContentType input fields</button>
  </li>
</ul>

点击“添加”按钮：

public addNewCT(event: Event) {
    $('#ContentTypes').append($('#CTcontainer').clone(true, true).removeAttr('id').removeClass('hidden'));
}

当点击按钮时，它应该触发：

public removeThisCT(event: Event) {
    alert('testclick');
    console.log('testclick');
    // $(this).closest('.removeContainer').remove();
}

但是什么也没有发生，在开发工具中调试也显示单击按钮时我没有进入该功能。好像我的事件没有被克隆？查看 jQuery .clone() 它说添加 (true, true) 以使用 dataAndEvents 和深度事件等进行克隆，但似乎不起作用？

这是因为它是点击事件的角度而不是 jquery .on('click',) 事件吗？

【问题讨论】：

标签： javascript jquery angular events

【解决方案1】：

Angular 会将您的整个模板编译成 javascript，以使其快速加载、易于压缩、能够将您的应用程序作为单个文件交付等等。更重要的是，在您的情况下，动态添加角度模板代码将不起作用，因为您完全绕过了角度编译器。

根据经验；当您编写 jquery 来操作 DOM 时，您应该真正质疑自己这是否真的是您想要的，以及是否没有 Angular 的方式来实现它。首先，一旦 ngIf 变为 false 或 ngFor 不再包含相同数量的元素，ngIf 或 ngFor 中包含的所有组件都将从 dom 中完全删除。使用它们，然后抛弃 jquery。

如果您想动态地包含整套逻辑，请阅读本指南的特定部分： https://angular.io/guide/dynamic-component-loader

一小段代码可能对您有所帮助：

<ul *ngIf="cts.length > 0">
  <ng-template ngFor let-ct [ngForOf]="cts">
     <li>
       <label>Content Type Name:</label>
       <input class="json-input" type="text" name="CT_name">
     </li>
     <li>
       <label>Content Type Group:</label>
       <input class="json-input" type="text" name="CT_group">
     </li>
     <li *ngIf="contentTypeArray.length != '0'">
       <label>Inherit from Content Type:</label>
       <select class="json-input" name="CT_contentTypeInherit">
         <option *ngFor="let ct of contentTypeArray">{{ ct.name }}</option>
       </select>
     </li>
     <li>
       <button type="button" class="btnSubmit" 
 (click)="removeThisCT($event)">Remove these ContentType input fields</button>
     </li>
  </ng-template>`
</ul>

添加 ct（无论这意味着什么，不要在代码中使用缩写）

public addNewCT(event: Event) {
   this.cts.push({name: 'new ct'});
}  

public removeCT(event: Event) {
   this.cts = [...this.cts.filter(ct => ct.name != event.name)];
}

【讨论】：