[英]Angular2 How to trigger (click) event without clicking
我想将数据从 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”值。
有什么办法可以自动触发(点击)事件吗?
给它一个 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;
}
刚从一项研究来到这里,我决定为这个话题做出自己的贡献。 :)
您也可以创建和发送事件:
const domEl: HTMLElement = document.createElement('div');
// or do whatever you have to do to get the DOM Element
function triggerEvent(el: HTMLElement, evt: Event): void {
if (el && evt) {
const fakeEvent = new Event(evt, {bubbles: false, cancelable: false});
el.dispatchEvent(fakeEvent);
}
}
// adding some events to make this example more functional,
// but do what you have to do to bind an event to your DOM Element
domEl.addEventListener('click', (ev) => { console.log('click', ev); });
domEl.addEventListener('focus', (ev) => { console.log('focus', ev); });
domEl.addEventListener('blur', (ev) => { console.log('blur', ev); });
triggerEvent(domEl, 'click'); // to dispatch click event
triggerEvent(domEl, 'focus'); // to dispatch focus event
triggerEvent(domEl, 'blur'); // to dispatch blur event
希望它能对你或其他人在未来的研究中有所帮助。 :D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.