如何触发点击组件中的HTML文件元素？（角2）

本文介绍了如何触发点击组件中的HTML文件元素？（角2）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

I am very new to Angular 2 the question is How to trigger click on an HTML file element from a component?

我对Angular 2非常新颖，问题在于如何触发单击组件中的HTML文件元素？ rankingFilter（）{

this.RepsloaderShow = true;
this.reps = [];
var data = {
from：this.fromFilter，
to：this.toFilter，
user_search：this.user_search
}
this.http。（（数据）=> {
这个数据） .reps = data;
this.RepsloaderShow = false;
//触发器点击此处

}）;
}

rankingFilter() { this.RepsloaderShow = true; this.reps = []; var data = { from: this.fromFilter, to: this.toFilter, user_search: this.user_search } this.http.post(CONSTANTS.baseApiUrl + 'reports/rankings_individuals', data) .map(res => res.json()) .subscribe((data) => { this.reps = data; this.RepsloaderShow = false; // Trigger click here });}

HTML文件（单击class ='rep'上的事件）

HTML File (click event on class='rep')

    <ul class="carousel-indicators section-nav">
        <li class=" icon_0 icon active rep" data-target="#slideable" data-slide-to="0">
            <span class='shh'>Reps</span>
            <p style="display: none;">Reps</p>
        </li>
        <li class="icon_0 icon team" data-target="#slideable" data-slide-to="1">
            <span class='shh'>Teams</span>
            <p style="display: none;">Teams</p>
        </li>
        <li class="icon_0 icon award" data-target="#slideable" data-slide-to="2">
            <span class='shh'>Class Ranks</span>
            <p style="display: none;">Class Ranks</p>
        </li>
    </ul>

推荐答案

从主机元素派发

constructor(private elRef:ElementRef, private renderer:Renderer) {}

用于从模板内的元素分派

For dispatching from an element inside the template

<some-elem #target></some-element>

@ViewChild('target') elRef:ElementRef;

然后发送事件：

And then dispatch the event:

  ...
    this.renderer.invokeElementMethod(this.elRef.nativeElement,
        'dispatchEvent',
        [new MouseEvent('click', { bubbles: true, cancelable: true })]);

这篇关于如何触发点击组件中的HTML文件元素？（角2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

角2