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

Question

我想将数据从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'值。

有没有办法可以自动触发（点击）事件？

- Lea

---

调用该方法？ - eko

你可以在 ngOnInit() { } 上调用该方法，它将在页面加载后被调用。 - Deepa

我不能在ngOnInit()中直接调用passCharge(r.value['charge'])方法，因为组件无法读取r.value['charge']，这会导致编译错误。如果我添加其他内容，它也不会打印我想要的结果。 - Lea

你的代码中的 r 是什么意思？ - eko

Answer 1

给它一个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();
}

- user4676340

---

HTMLElement是什么？我尝试了这个，但它打印错误./MainComponent类MainComponent - 内联模板：57:8引起的问题：无法读取未定义的“nativeElement”属性 - Lea

HTMLElement是一个HTML元素，通常在原生JS中通过document.getElementById()返回。这个错误发生是因为你没有声明elementRef。 - user4676340

不要将其放在构造函数中，而是将其作为本地变量。 - user4676340

@Xan 因为我会解释，而不是提供最快的解决方案。 - user4676340

this.myDiv.nativeElement; 是未定义的？即使在Angular 7中使用AfterViewInit后仍无效。 - ThinkTank

Answer 2

你可以在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);
  }
}

- Gaurav

Answer 3

在被采纳的回答的基础上，如果你遇到了错误信息"Cannot read property 'nativeElement' of undefined" 或者 "Cannot read property click of undefined"，正如提问者在对所提供答案的评论中明确指出的那样，可以使用这个解决方案：

如果你想获取包含组件或指令的元素的引用，你需要指定你要获取的是元素而不是组件或指令。

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

- Cedric Ipkiss

Answer 4

我刚从一项研究中了解到这里，决定为这个话题做出我的贡献。 :)

你也可以创建和分发事件：

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

- Augusto TMW

Answer 5

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

}

- Liyaquet Hussain

---

这样怎么可能编译通过呢？passCharge（charge）和this.charge = charge都在类本身内部进行，而不是在任何方法中进行吗？ - Travis