Angular2 如何在不点击的情况下触发 (click) 事件

10 浏览
0 Comments

Angular2 如何在不点击的情况下触发 (click) 事件

我想将数据从HTML传递给组件，所以我创建了一个如下的事件：

月 8次 {{r.value['charge']}}

在组件中：

passCharge(charge){
   this.charge = charge;
   console.log(this.charge,"给我数字")
}

如果我点击事件，我看到一切都正常工作。

但是我希望自动触发此点击事件，因为我希望组件在加载完成后立即使用'this.charge'的值。

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

0

3 答案

0 Comments

问题的出现原因是在使用Angular2中的(click)事件时，可能会出现无法通过点击来触发事件的情况。解决方法是使用特定的语法来获取宿主元素的引用，而不是组件或指令的引用。

在这个问题的解决方法中，我们可以看到一个相关的回答提到了一个解决方案。该解决方案是在获取宿主元素的引用时，使用了特定的语法来指定获取元素而不是组件或指令。具体来说，它使用了以下代码来获取元素的引用：

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

通过使用这个语法，我们可以解决无法通过点击来触发(click)事件的问题。

0
0 Comments

在Angular2中，有时候我们希望在不点击元素的情况下触发click事件。以下是问题的出现原因和解决方法。

问题的出现原因：

在某些情况下，我们希望在组件初始化时自动触发一个click事件。然而，在ngOnInit函数中直接调用click事件并不会生效，因为DOM元素尚未加载完成。

解决方法：

为了解决这个问题，我们可以使用setTimeout函数来延迟执行click事件，确保DOM元素已经加载完成。

在HTML模板中，我们添加一个带有click事件的div元素，并使用#divClick来引用它。代码如下：

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

在组件的ts文件中，我们引入ElementRef和ViewChild，并定义一个名为divClick的元素引用。代码如下：

import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '/core';
@Component({
  //组件装饰器
})
export class MyComponent implements OnInit, AfterViewInit {
  @ViewChild('divClick') divClick: ElementRef;
  ngOnInit() {
    //其他代码
    setTimeout(() => {
      this.divClick.nativeElement.click();
    }, 200);
  }
}

通过以上方法，在组件初始化时，我们可以自动触发divClick元素的click事件，而无需实际点击该元素。

0
0 Comments

Angular2如何在没有点击的情况下触发(click)事件？

问题出现的原因是因为没有正确声明elementRef。HTMLElement是一个HTML元素，在原生JS中通常通过document.getElementById()返回。在这里，你需要声明elementRef来引用HTML元素。

解决方法是将elementRef声明为一个局部变量，而不是放在构造函数中。另外，需要在AfterViewInit中调用triggerFalseClick()方法，因为OnInit还没有加载完视图。

如果你有一个HTMLElement却无法触发click事件，请提供一个最小可复现的示例，并在Stack Overflow上提问。

最快的解决方法是直接使用this.myDiv.nativeElement.click()。但是，为了解释清楚，我给出了更详细的解决方法。

在Angular 7中，你需要使用静态属性来获取elementRef，如下所示：

@ViewChild('myDiv', {static: true}) myDiv: ElementRef;

0