Quand appelle-t-on Angular2 ngAfterViewInit?
J'ai besoin de code jQuery à exécuter après que ma vue de composant Angular se soit initialisée pour transformer les valeurs numériques en étoiles.
Je mets le code dans la fonction ngAfterViewInit, mais il ne fait pas ce dont j'ai besoin. J'ai défini un point d'arrêt dans la fonction et je constate que la plupart du code HTML de mon composant n'a même pas été chargé au moment de l'appel de la fonction ngAfterViewInit. Les pièces non chargées sont générées à l'aide de la directive * ngFor.
Comment puis-je faire exécuter mon code après que cette directive a généré tout le code HTML sur lequel je dois fonctionner?
Quand est-ce que ngAfterViewInit est appelé?
ngAfterViewInit() doit être appelé après la création de la vue d'un composant et de celle de ses enfants. J'ai testé cela et constaté que les ngAfterViewInit()s des enfants sont appelés avant la ngAfterViewInit() du parent.
Quand vous dites "la plupart du code HTML de mon composant n'a même pas été chargé", qu'entendez-vous par "chargé"? Le code HTML est-il dans le modèle du composant enfant ou est-il chargé (ou généré) par un autre moyen?
Comment puis-je faire exécuter mon code après que cette directive a généré tout le code HTML sur lequel je dois fonctionner?
Il serait utile de voir le code de la directive. Si la directive génère en quelque sorte du HTML qui ne figure pas dans les modèles Angular, vous devrez peut-être déclencher manuellement un événement (par exemple, en utilisant une propriété de sortie) pour informer le parent lorsque le rendu est terminé. Ou vous pouvez utiliser setTimeout() (mais ce ne serait pas fiable).
J'ai besoin de code jQuery à exécuter après que ma vue de composant Angular se soit initialisée pour transformer les valeurs numériques en étoiles.
Où obtenez-vous ces valeurs numériques? S'ils sont chargés dynamiquement à partir d'un serveur, vous pouvez déclencher un événement à l'arrivée des données et mettre à jour la vue à ce stade.
Aussi, pourquoi ne pas écrire un composant qui prend un nombre en tant que propriété d'entrée et génère des étoiles en utilisant NgFor?
J'utilise ngAfterViewChecked lorsque le DOM est prêt.
import {Component, AfterViewChecked} from '@angular/core';
export class Spreadsheet implements AfterViewChecked{
ngAfterViewChecked(){
}
}