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>

在组件中：

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

如果我单击该事件，我会看到一切正常。但我想自动触发此单击事件，因为我希望组件在组件完成加载后立即使用“this.charge”值。

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

原文由 Lea 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

扩展 已接受的答案，如果您收到错误“无法读取未定义的属性’nativeElement’”或什至“无法读取未定义的属性单击”，正如 OP 在评论中明确指出的那样，请使用 此解决方案：

如果您想获取承载组件或指令的元素的引用，您需要指定您想要该元素而不是组件或指令

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

原文由 Cedric Ipkiss 发布，翻译遵循 CC BY-SA 4.0 许可协议