Angular 5 – Comment appeler une fonction quand un élément HTML est créé avec * ngFor
Actuellement, je travaille dans une vue où je dois créer dynamicment des éléments HTML.
Je crée les éléments HTML avec la directive * ngFor délimitée par un tableau.
Je dois faire référence au nouvel élément HTML à l’aide du sélecteur JQuery après l’introduction d’un nouvel object dans le tableau, mais l’élément HTML n’est pas encore rendu.
Comment puis-je déclencher une fonction juste après que l’élément HTML soit prêt?
- typeError: impossible de lire la propriété ‘tigerStart’ de non définie
- Comment faire pour que jquery ui date picker travaille avec angular2?
- Angular 4 jquery ne fonctionne pas
- Enveloppez gridstack.js dans le composant Angular 2
- Quelle est la meilleure façon d’utiliser les widgets jquery dans angular 2?
Merci d’avance.
- Intégrer Select2 dans l’application Angular2
- que diriez-vous d’utiliser Angular2 + JQuery ensemble?
- Comment utiliser Jquery Query Builder dans Angular
- Angular2 et jQuery ‘changements’ événements
- Ionic2 Comment utiliser le plugin JQuery dans une page
Vous pouvez suivre les étapes ci-dessous à l’intérieur du composant: –
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. Toute la logique est que ngAfterViewInit () fonctionne lorsque le code HTML est complètement chargé et que vous devez faire quelque chose avec ce code HTML. Par exemple, votre vue contient du code HTML statique et certains fichiers JS externes créent des éléments HTML à l’intérieur de certains div de manière dynamic. Donc, vous allez d’abord charger votre vue en utilisant ngOnInit (), puis en utilisant un JS externe, vous pouvez créer et lier des éléments HTML de manière dynamic à cette div.
J’espère que ceci vous aide.
Bonne chance.
Comme indiqué dans les commentaires, vous ne souhaiterez probablement pas utiliser JQuery sur des éléments de DOM angulars si vous avez le choix. Cela conduira à une confusion sans fin.
Cependant, vous pouvez accéder aux enfants DOM d’un composant à l’aide de elementRef.nativeElement . Le cycle de cycle de vie auquel vous souhaitez exécuter cela dans le cas de *ngFor (ou d’autres directives structurelles) est AfterViewChecked . À ce stade, vous savez que le composant a fini de lier et de rendre son contenu.
Voici un petit exemple peu coûteux combinant simplement toutes les div générées dynamicment d’un composant:
import {AfterViewChecked, Component, ElementRef} from '@angular/core'; @Component({ selector: 'app-root', template: ` {{entry}} ` }) export class AppComponent implements AfterViewChecked { constructor(private elementRef: ElementRef) {} ensortinges = ['a', 'b', 'c']; ngAfterViewChecked(): void { const divs = this.elementRef.nativeElement.querySelectorAll('div'); divs.forEach(div => div.style.background = 'red'); } }