Question

所以我有一个隐藏的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'，）事件吗？

Answer 1

Angular会将您的整个模板编译成javascript，以便快速加载，轻松压缩，能够将您的应用程序作为单个文件传送，等等。更重要的是，在您的情况下，动态添加角度模板代码将无法工作，因为您完全绕过角度编译器。

根据经验;当你编写jquery来操作DOM时，你应该真的质疑自己这是否真的是你想要的，如果没有Angular方式的话。首先，一旦ngIf变为假或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（不管是什么意思，不要在代码中使用abreviations）

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

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

克隆的DOM结构上的Angular 5 click事件不会触发

1 个答案: