Когда вызывается Angular2 ngAfterViewInit?

Мне нужен код jQuery для запуска после инициализации представления компонента Angular для преобразования чисел в звезды.

Я поместил код в функцию ngAfterViewInit, но он не делает то, что мне нужно. Я установил точку прерывания в функции, и я вижу, что большая часть HTML моего компонента даже не загружается к моменту вызова функции ngAfterViewInit. Части, которые не загружены, генерируются с помощью директивы * ngFor.

Как я могу запустить мой код после того, как эта директива сгенерировала весь html, на котором мне нужно работать?

Ответы

Ответ 1

Когда вызывается ngAfterViewInit?

ngAfterViewInit() должен вызываться после представления компонента и его дочерних представлений. Я протестировал это и обнаружил, что дети ngAfterViewInit() вызываются перед родительским ngAfterViewInit().

Когда вы говорите, что "большая часть HTML моего компонента даже не загружена", что вы подразумеваете под "загруженным"? Является ли HTML в шаблоне дочернего компонента или он загружается (или сгенерирован) другими способами?

Как я могу запустить мой код после того, как эта директива сгенерировала весь html, на котором мне нужно работать?

Это поможет увидеть код директивы. Если директива каким-то образом генерирует HTML-код, который не содержится в шаблонах Angular, вам может потребоваться вручную инициировать событие (например, используя свойство вывода), чтобы уведомить родителя о завершении рендеринга. Или вы можете использовать setTimeout() (но это не было бы надежным).

Мне нужен код jQuery для запуска после инициализации представления компонента Angular для преобразования чисел в звезды.

Откуда вы получаете эти значения чисел? Если они динамически загружаются с сервера, вы можете инициировать событие при поступлении данных и обновлять представление в этой точке.

Кроме того, почему бы не написать компонент, который принимает число как свойство ввода и генерирует звезды с помощью NgFor?

Ответ 2

Я использую ngAfterViewChecked, когда я зависим от готовности DOM.

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

export class Spreadsheet implements AfterViewChecked{

   ngAfterViewChecked(){

   }
}