각도2 클릭 없이 이벤트를 트리거(클릭)하는 방법

각도2 클릭 없이 이벤트를 트리거(클릭)하는 방법

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")
}

이벤트를 클릭하면 모든 게 잘 되고 있어.하지만 나는 이 클릭 이벤트를 자동으로 트리거하고 싶다. 왜냐하면 구성 요소가 로딩되면 바로 'the.charge' 값을 사용하길 원하기 때문이다.

이벤트를 자동으로 트리거(클릭)할 수 있는 방법이 있는가?

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

다음과 같이 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);
  }
}

<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;

}

승인된 답변에서 OP가 답변할 의견에서 명확하게 기술한 대로 "정의되지 않은 속성 'nativeElement'를 읽을 수 없음" 또는 "정의되지 않은 속성 클릭을 읽을 수 없음" 오류가 표시되면 이 솔루션을 사용하십시오.

구성요소 또는 지시문을 호스트하는 요소의 참조를 얻으려면 구성요소 또는 지시문 대신 요소를 지정하십시오.

@ViewChild('myDiv', { read: ElementRef }) myDiv: ElementRef<HTMLElement>;

참조URL: https://stackoverflow.com/questions/45027331/angular2-how-to-trigger-click-event-without-clicking