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

【问题标题】：Angular2 How to trigger (click) event without clickingAngular2如何在不点击的情况下触发（点击）事件
【发布时间】：2017-12-15 02:09:56
【问题描述】：

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

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

【问题讨论】：

调用方法？
你可以调用 ngOnInit() { } 上的方法，页面加载后就会被调用。
我不能只调用方法 passCharge(r.value['charge']);在 ngOnInit() 情况下组件无法读取 r.value['charge'] 它不会编译如果我添加 otheriwse，它不会打印我想要的内容
您的代码中的r 是什么？

标签： angular typescript data-binding mouseclick-event

【解决方案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();
}

【讨论】：

什么是 HTMLElement？我试过了，但打印错误。/MainComponent class MainComponent - inline template:57:8 由：无法读取未定义的属性“nativeElement”
HTMLElement 是一个 HTML 元素，在原生 JS 中通常由document.getElementById() 返回。出现此错误是因为您没有声明 elementRef。
声明你的意思是这个？ 1.从'@angular/core'导入{组件，OnInit，ViewChild，ElementRef}； 2.constructor(el:ElementRef){}我都试过了还是一样的错误:(
不要放在contructor里面，放在局部变量里面。
@Xan 因为我解释，而不是给出最快的解决方案。

【解决方案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);
  }
}

【讨论】：

【解决方案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;

}

【讨论】：

这将如何编译？ passCharge(charge) 和 this.charge =charge 是在类本身而不是任何方法中完成的？

【解决方案4】：

扩展the accepted answer，如果您收到错误“无法读取未定义的属性'nativeElement'”或什至“无法读取未定义的属性单击”，正如 OP 在提供的 cmets 中明确指出的那样，请使用this solution ：

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

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

【讨论】：