Блог

Главная - Вопросы по программированию - addEventListener для динамически добавляемых HTML-тегов в Angular 2

addEventListener для динамически добавляемых HTML-тегов в Angular 2

#javascript #html #angular #typescript

#javascript #HTML #angular #typescript

Вопрос:

Я хотел бы сгенерировать в html-коде моего углового компонента N пар <p> item_{1..N} </p> .. <pre> json_data{1..N} </pre> таких, чтобы pre N тегов изначально были скрыты, и они расширялись, когда кто click -то просматривал его верхний item_${i} .

Я попытался добавить код javascript внутри html, чтобы установить innerHtml , но это не сработало. Поэтому я решил сделать это в компоненте Angular.

Следующий код успешно генерирует N (50) элементов, но слушатели не подключены, хотя я пытался вызвать ChangeDetectorRef.detectChanges() .

 @Component({
  ....
})

export class X implements OnInit, AfterViewInit {
  ...
  @ViewChild('my_div') myDiv ? : ElementRef;

  constructor(private ref: ChangeDetectorRef) {}
  
  ngAfterViewInit() {
    this.generateItems();
  }

  generateItems() {
    let str = '';
    for (var i = 0; i < 50; i  ) {
      str  = '<div #some_tag_${i}><p>item_${i}</p></div>';
      str  = '<div #another_tag_${i}><pre>$json_data[i]</pre></div>';
    }
    // Assume that we have <div #my_div></div> in the html template of this component.
    this.myDiv.nativeElement.innerHTML = str;
    this.ref.detectChanges();
    // Trying with plain js document.* functions.
    for (let i = 0; i < 50; i  ) {
      const someTag = document.getElementById(`some_tag_${i}`);
      if (!selfLinkElem) {
        continue;
      }
      someTag.addEventListener('click', (e) => {
        const anotherTag = document.getElementById(`another_tag_${i}`);
        if (!anotherTag) {
          return;
        }
        if (anotherTag.style.display === 'none') {
          anotherTag.style.display = 'block';
        } else {
          anotherTag.style.display = 'none';
        }
      });
    }
  }
}

Я также попытался поместить ElementRef в конструктор, но это в первую очередь не генерирует N элементов, поэтому последующий код также не работает:

 ngAfterViewInit() {
  var el = this.elementRef.nativeElement.querySelector('some_tag_1');
  if (el) {
    // this block is never exercised.
    el.addEventListener('click', some_function);
  }
}

У кого-нибудь есть идеи, как заставить это работать?

Комментарии:

1. Но зачем вам генерировать элементы таким образом? Возможно, есть лучший способ генерировать элементы.

2. Предложения более чем приветствуются. Я попытался сгенерировать его с помощью скрипта в html, но он ничего не сгенерировал.

3. Я рекомендую проверить ngFor