Angular2如何不单击就触发(单击)事件

Question

我希望将数据从HTML传递到组件，因此我创建了如下事件：

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

和in组件：

passCharge(charge){
   this.charge = charge;
   console.log(this.charge,"give me the number")
}

如果我点击这个活动，我会发现一切都很好。但是我想要自动触发这个单击事件，因为我希望组件在完成加载后立即使用'this.charge‘值。

有什么方法可以自动触发(点击)事件吗？

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

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

Answer 3

在the accepted answer上展开时，如果出现错误“无法读取未定义的属性'nativeElement‘”，甚至“无法读取未定义属性的单击”，正如OP在要回答的注释中明确声明的那样，请使用this solution

如果要获得承载组件或指令的元素的引用，则需要指定要元素而不是组件或指令。

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