jQuery Girl
  1. jQuery Girl
  3. Angular2 et jQuery ‘changements’ événements
Intereting Posts
Combinaison de $ (‘corps’). Sur (‘clic’) avec $ (fenêtre) .resize (fonction () dans jQuery Modifier CSS à l’aide de JQuery APRÈS que l’animation soit terminée Envoi de données au lieu d’un fichier pour un formulaire de saisie Lors de l’enregistrement automatique avec jQuery, comment puis-je envoyer un formulaire pour «mettre à jour» plutôt que «créer» après la première sauvegarde? Deuxième liste déroulante basée sur la première liste déroulante Télécharger des images avec un exemple de dialog modal jQuery Basculer le problème dans l’événement en direct de jquery La fenêtre de dialog JQueryUI ne se trouve pas dans ma DIV, mais est placée sous le corps. Comment garder dans ma div? Temps de travail en calendrier complet La valeur revient comme indéfinie Comment transformer du texte en émoticons Struts2 jQuery DataTable 1.10 Paramètres Http multi-dimensionnels Remplacer une div par une autre Reliure KnockoutJS JQuery Combobox Obtenir un élément avec jquery et selenium IDE 1.0.8

Angular2 et jQuery ‘changements’ événements

J’ai une entrée cachée pour contrôler les modifications apscopes par jQuery, qui inclut un événement de change angular2, comme ceci

Ensuite, dans mon cas, je dois utiliser jQuery pour modifier la valeur de cette entrée, puis déclencher l’événement change : 

 $('#input1').val('somevalue').sortinggger('change');

Cet événement de change que j’ai déclenché via jQuery ne fonctionne qu’avec jQuery, mais pas avec Angular2: 

 //This is working $('#input').change(function(){ console.log('Change made'); })

En composante angular2: 

 //This is not working onChange(): void{ console.log('Change made'); }

Comment puis-je contourner cette situation?

    Vous pouvez affecter une variable de référence de modèle à , comme #hiddenInput1 , récupérer son élément natif (via @ViewChild ) dans la classe de composant, puis utiliser jQuery lui-même pour écouter l’événement de change .

    Demo Plunker ici . 

     import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'my-app', template: ` 
    My First Angular 2 App
     
      ` }) export class AppComponent implements AfterViewInit { @ViewChild('hiddenInput1') hiddenInput1:ElementRef; ngAfterViewInit() { $(this.hiddenInput1.nativeElement).on('change', (e) => { console.log('Change made -- ngAfterViewInit'); this.onChange(e); }); } onChange(): void{ console.log('Change made -- onChange'); } }

    L’événement de changement Angular2 est ajouté via addEventListener natif.

    Vous ne pouvez pas déclencher un événement natif avec le fichier .sortinggger (‘change’) de jQuery. Il vous faudra donc créer un événement natif et l’ envoyer : 

      const customEvent = document.createEvent('Event'); customEvent.initEvent('change', true, true); $('#input1')[0].dispatchEvent(customEvent);

    De cette façon, angular2 se déclenchera onChange gestionnaire de changement.

    Voici une démo plunker

    Comme @Cristal Embalagens mentionné dans les commentaires, vous devez utiliser input événement input pour angular2 car DefaultValueAccessor s’abonne à cet événement: 

     @Directive({ selector: 'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]', host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, providers: [DEFAULT_VALUE_ACCESSOR] }) export class DefaultValueAccessor implements ControlValueAccessor {

    Quelques exemples