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")

  }

如果我点击该活动，我看到一切正常。但是我想自动触发这个click事件，因为我希望组件在组件完成加载后立即使用'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（）中触发click事件，如下所示： `

<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

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

}

Answer 4

扩展the accepted answer，如果您收到错误“无法读取未定义的属性'nativeElement'”甚至“无法读取未定义的属性单击”，正如OP在提供的答案的评论中明确指出的那样，请使用{ {3}}：

<块引用>

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

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

Angular2如何在不单击的情况下触发（单击）事件

4 个答案: