Angular2 Как вызвать (щелчок) событие без щелчка

Я хочу передать данные из HTML в компонент, поэтому я создал событие, подобное этому:

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

И в компоненте:

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

Если я нажимаю на событие, я вижу, что все работает нормально. Но я хочу, чтобы это событие вызывалось автоматически, поскольку я хочу, чтобы компонент использовал значение this.charge сразу после завершения загрузки компонента.

Есть ли способ, которым я могу вызвать событие (клик) автоматически?

Ответ 1

Дайте ему ссылку на ViewChild:

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

В вашем компоненте:

@ViewChild('myDiv') myDiv: ElementRef<HTMLElement>;

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

Ответ 2

Вы можете вызвать событие click в ngOnInit() следующим образом:

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

В файле 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

так как вы хотите вызвать его после загрузки компонента, вы можете использовать это:

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

@Component({
   // some configurations
})
export class MyComponent implements OnInit{
   ngOnInit(){
      // this will be executed once the component done loading
      this.passCharge(r.value['charge']);
   }
   passCharge(charge){
       this.charge = charge;
       console.log(this.charge,"give me the number")
  }
}

OnInit - это интерфейс, который поставляется с угловым, и имеет один метод привязки, который является угловым методом ngOnInit(), чтобы вызвать этот метод после загрузки компонента.

Ответ 4

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

Надеюсь, это поможет тебе..

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;

}