typescript Angular2如何在不点击的情况下触发(click)事件

slmsl1lt  于 2022-12-14  发布在  TypeScript
关注(0)|答案(5)|浏览(183)

我希望将数据从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'值。
有没有什么方法可以自动触发(点击)事件?

cclgggtu

cclgggtu1#

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

ktca8awb2#

您可以在ngOnInit()中触发click事件,如下所示:`

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

在组件.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);
  }
}
ccrfmcuu

ccrfmcuu3#

the accepted answer上展开,如果您得到错误“无法读取未定义的属性'nativeElement'”或者甚至“无法读取未定义的属性click”,正如OP在提供的回答的注解中明确指出的,请使用this solution
如果要获取承载组件或指令的元素的引用,则需要指定需要元素而不是组件或指令

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

o8x7eapl4#

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

}
yi0zb3m4

yi0zb3m45#

刚从一项研究中来到这里,我决心为这个主题做出我的贡献。:)
您也可以创建和调度事件:

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

希望它能对你或其他人在未来的研究中有所帮助

相关问题