Угловое событие 5 кликов на клонированной структуре DOM не срабатывает - PullRequest
Новая
       10

Угловое событие 5 кликов на клонированной структуре DOM не срабатывает

0 голосов
/ 12 июня 2018

Итак, у меня есть скрытая структура 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',)?

1 Ответ

0 голосов
/ 12 июня 2018

Angular скомпилирует весь ваш шаблон в javascript, что сделает его быстрой загрузкой, простым для сжатия, способным доставить ваше приложение в виде одного файла и так далее.Что еще более важно в вашем случае, добавление углового шаблона шаблона на лету не будет работать, так как вы полностью обходите угловой компилятор.

Как правило;когда вы пишете jquery для манипулирования DOM, вы должны действительно задаться вопросом, действительно ли это то, что вы хотите, и нет ли у Angular способа это сделать.Для начала, все компоненты, включенные в ngIf или ngFor, будут полностью удалены из dom, как только ngIf станет false или ngFor больше не будет содержать того же числа элементов.Используйте их и отбросьте 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>

добавляя кт (что бы это ни значило, не используйте сокращения в коде) 

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

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