html - 如何触发点击组件中的 HTML 文件元素？ ( Angular 2)

Question

我是 Angular 2 的新手，问题是如何从组件触发对 HTML 文件元素的点击？

  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' 上的点击事件)

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

Answer 1

用于从宿主元素调度

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

用于从模板内的元素调度

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

@ViewChild('target') elRef:ElementRef;

然后发送事件:

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