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

Posted 2023-02-23

【中文标题】Angular2如何在不点击的情况下触发（点击）事件

【英文标题】：Angular2 How to trigger (click) event without clicking

【发布时间】：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 是什么？

【参考方案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>;