Angular2 вручную активировать событие щелчка на конкретном элементе

Я пытаюсь запустить событие click (или любое другое событие) на элементе программно. Другими словами, я хочу знать похожие функции, предлагаемые методом jQuery.trigger() в angular2.

Есть ли встроенный метод для этого?..... если нет, предложите, как я могу это сделать

Рассмотрим следующий фрагмент кода

<form [ngFormModel]="imgUploadFrm"
          (ngSubmit)="onSubmit(imgUploadFrm)">
        <br>
        <div class="input-field">
            <input type="file" id="imgFile" (click)="onChange($event)" >
        </div>
        <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button>
 </form>

Здесь, когда пользователь нажимает кнопку btnAdd, он должен запускать событие click на imgFile

Ответы

Ответ 1

Angular4

Вместо

    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);

использование

    this.fileInput.nativeElement.dispatchEvent(event);

потому что invokeElementMethod больше не будет частью рендеринга.

Angular2

Используйте ViewChild с переменной шаблона, чтобы получить ссылку на ввод файла, затем используйте Renderer, чтобы вызвать dispatchEvent, чтобы запустить событие:

import { Component, Renderer, ElementRef, ViewChild } from '@angular/core';
@Component({
  ...
  template: `
...
<input #fileInput type="file" id="imgFile" (click)="onChange($event)" >
...`
})
class MyComponent {
  @ViewChild('fileInput') fileInput:ElementRef;

  constructor(private renderer:Renderer) {}

  showImageBrowseDlg() {
    // from http://stackoverflow.com/a/32010791/217408
    let event = new MouseEvent('click', {bubbles: true});
    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);
  }
}

Обновление

Поскольку прямой доступ DOM больше не обескуражен командой Angular, этот простой код также можно использовать

this.fileInput.nativeElement.click()

См. также https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent

Ответ 2

Мне также нужна была аналогичная функциональность, где у меня есть Контроль ввода файлов с display:none и Button control, где я хотел вызвать событие click для управления входными файлами, когда я нажмите на кнопку, ниже приведен код для этого

<input type="button" (click)="fileInput.click()" class="btn btn-primary" value="Add From File">
<input type="file" style="display:none;" #fileInput/>

настолько прост, что он работает безупречно...

Ответ 3

Ответ Günter Zöchbauer правильный. Просто подумайте о добавлении следующей строки:

showImageBrowseDlg() {
    // from http://stackoverflow.com/a/32010791/217408
    let event = new MouseEvent('click', {bubbles: true});
    event.stopPropagation();
    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);
  }

В моем случае я бы получил ошибку "пойманный RangeError: максимальный размер стека вызовов превышен", если нет. (У меня есть стрелка div-карты по щелчку и входной файл внутри)