web-dev-qa-db-ja.com

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」の値をコンポーネントで使用するため、このクリックイベントを自動的にトリガーする必要があります。

イベントを自動的にトリガー（クリック）する方法はありますか？

angulartypescriptdata-bindingmouseclick-event
22
Lea

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();
}
41
Maryannah

次のように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);
  }
}
4
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>

これがあなたを助けることができるように願っています..

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