web-dev-qa-db-fra.com

Angular2 Comment déclencher (cliquer) un événement sans cliquer

Je souhaite transmettre des données HTML au composant afin de créer un événement comme celui-ci.

 <div id="tutor-price" (click)="passCharge(r.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{r.value['charge']}} </span></div>

et en composant, 

  passCharge(charge){
   this.charge = charge;
   console.log(this.charge,"give me the number")

  }

Si je clique sur l'événement, je vois que tout fonctionne bien. Mais je veux déclencher automatiquement cet événement click puisque je veux que le composant utilise la valeur 'this.charge' immédiatement après le chargement du composant.

Est-il possible de déclencher (cliquer) un événement automatiquement?

angulartypescriptdata-binding
10
Lea

Donnez-lui une référence ViewChild: 

<div #myDiv id="tutor-price" (click)="passCharge(r.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{r.value['charge']}} </span></div>

Dans votre composant: 

@ViewChild('myDiv') myDiv: ElementRef;

triggerFalseClick() {
    let el: HTMLElement = this.myDiv.nativeElement as HTMLElement;
    el.click();
}
24
trichetriche

Vous pouvez déclencher un événement click dans ngOnInit () comme ceci: `

<div #divClick id="tutor-price" (click)="passCharge(r.value['charge'])">
    <span id="month">월 8회</span> 
    <span id="price"> {{r.value['charge']}} </span>
</div>`

Dans le fichier Component.ts 

import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
@Component({
  //component decoraters
})
export class MyComponent implements OnInit, AfterViewInit {
  @ViewChild('divClick') divClick: ElementRef;
  ngOnInit() {
      // your other code
    setTimeout(() => {
    this.divClick.nativeElement.click();
    }, 200);
  }
}
3
Gaurav Krishn
<div #tutor id="tutor-price" (click)="passCharge(tutor.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{tutor.value['charge']}} </span></div>

J'espère que cela peut vous aider ..

import { Component, OnInit } from '@angular/core';
tutor:any;
@Component({
      //your component decorater tags
})
export class MyComponent implements OnInit{
   ngOnInit(){
      this.charge = this.tutor.value['charge'];
   }
   passCharge(charge){
   this.charge = charge;

}
1
Liyaquet Hussain