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 он должен запустить событие щелчка на imgFile

5 56
angularjs angular2-forms

5 ответов:

Angular4

вместо

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

использовать

    this.fileInput.nativeElement.dispatchEvent(event);

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

Angular2

использовать ViewChild с переменной шаблона, чтобы получить ссылку на исходный файл, а затем использовать рендерер для вызова 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 доступ больше не обескуражен угловой командой этот более простой код можно использовать также

this.fileInput.nativeElement.click()

Смотрите также https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

140

Я тоже хотел аналогичную функциональность, где у меня есть Управление Вводом Файлов С display:none и управления где я хотел вызвать выберите событие управления вводом файлов, когда я нажимаю на кнопку, ниже приведен код для этого

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

так просто, и это работает безупречно...

20

Гюнтер Он является правильным. Просто подумайте о добавлении следующей строки:

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]);
  }

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

1

это сработало для меня:

<button #loginButton ...

и внутри контроллера:

@ViewChild('loginButton') loginButton;
...
this.loginButton.getNativeElement().click();
1

если вы хотите имитировать нажмите на элемент DOM следующим образом:

<a (click)="showLogin($event)">login</a>

и есть что-то вроде этого на странице:

<li ngbDropdown>
    <a ngbDropdownToggle id="login-menu">
        ...
    </a>
 </li>

функции component.ts должно быть так:

showLogin(event) {
   event.stopPropagation();
   document.getElementById('login-menu').click();
}
0