Saya ingin meneruskan data dari HTML ke komponen, jadi saya telah membuat event seperti ini:
<div id="tutor-price" (click)="passCharge(r.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{r.value['charge']}} </span></div>
Dan dalam komponen:
passCharge(charge){
this.charge = charge;
console.log(this.charge,"give me the number")
}
Jika saya mengklik event tersebut, saya melihat semuanya bekerja dengan baik. Tetapi saya ingin memicu event klik ini secara otomatis karena saya ingin komponen menggunakan nilai 'this.charge' segera setelah komponen selesai dimuat.
Apakah ada cara untuk memicu event (klik) secara otomatis?
Berikan referensi ViewChild:
<div #myDiv id="tutor-price" (click)="passCharge(r.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{r.value['charge']}} </span></div>
Dalam komponen Anda:
@ViewChild('myDiv') myDiv: ElementRef<HTMLElement>;
triggerFalseClick() {
let el: HTMLElement = this.myDiv.nativeElement;
el.click();
}
Anda bisa memicu event klik di ngOnInit() seperti ini: `
<div #divClick id="tutor-price" (click)="passCharge(r.value['charge'])">
<span id="month">월 8회</span>
<span id="price"> {{r.value['charge']}} </span>
</div>`
Dalam berkas 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>
Semoga hal ini dapat membantu anda...
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;
}