Angular 5 - Как вызвать функцию, когда элемент HTML создается с помощью * ngFor - PullRequest
Новая
       7

Angular 5 - Как вызвать функцию, когда элемент HTML создается с помощью * ngFor

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

В настоящее время я работаю в представлении, где я должен динамически создавать элементы HTML.

Я создаю элементы HTML с директивой * ngFor, ограниченной массивом.

Мне нужно сослаться на новый элемент HTML с помощью селектора JQuery после добавления нового объекта в массив, но элемент HTML еще не отображается.

Как я могу вызвать функцию сразу после того, как HTML-элемент готов?

Заранее спасибо.

Ответы [ 2 ]

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

Как отмечено в комментариях, вы, вероятно, не хотите использовать JQuery для элементов Angular DOM, если у вас есть выбор. Это приведет к бесконечной путанице.

Однако вы можете получить доступ к дочерним элементам DOM компонента, используя elementRef.nativeElement. Хук жизненного цикла, для которого вы хотите запустить его, в случае *ngFor (или других структурных директив) равен AfterViewChecked. В этот момент вы знаете, что компонент завершил привязку и рендеринг своего содержимого.

В сочетании, вот небольшой дешевый пример, просто окрашивающий все динамически сгенерированные элементы div компонента: 

import {AfterViewChecked, Component, ElementRef} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let entry of entries">
      {{entry}}
    </div>
  `
})
export class AppComponent implements AfterViewChecked {

  constructor(private elementRef: ElementRef) {}

  entries = ['a', 'b', 'c'];

  ngAfterViewChecked(): void {
    const divs = this.elementRef.nativeElement.querySelectorAll('div');
    divs.forEach(div => div.style.background = 'red');
  }

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

Вы можете выполнить следующие шаги внутри компонента: - 

1) On ngOnInit(), you can write logic which is responsible for generating dynamic HTML.

2) On ngAfterViewInit(), you can write the logic for the functionality which is responsible to be applied after HTML view is loaded.

Вся логика в том, что ngAfterViewInit () работает, когда HTML полностью загружен, и вам нужно что-то сделать с этим HTML. Например, ваше представление имеет некоторый статический HTML, а некоторые внешние JS-файлы динамически создают некоторые элементы HTML внутри некоторого div. Итак, сначала вы загрузите свое представление с помощью ngOnInit (), а затем с помощью внешнего JS вы можете динамически создавать и привязывать HTML-элементы к этому div.

Надеюсь, это поможет вам.

Всего наилучшего.

...