angular2 вручну запускає подію клацання на певному елементі

Я намагаюся запускати подію клацання (або будь-яку іншу подію) на елементі програмно, Іншими словами, я хочу знати подібні функції, які пропонує метод 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

Кутова4

Замість

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

використання

    this.fileInput.nativeElement.dispatchEvent(event);

тому що invokeElementMethodбільше не буде частиною візуалізатора.

Кутова2

Використовуйте 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/en-US/docs/Web/API/EventTarget/dispatchEvent

Я також хотів схожу функціональність , де у мене є вхідний контроль файлів з display:noneі управління Button , де я хотів , щоб тригер події натискання вхідного файлу контролю , коли я натискаю на кнопку, нижче код , щоб зробити це

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

так просто, і це працює бездоганно ...

Це спрацювало для мене:

<button #loginButton ...

і всередині контролера:

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

Відповідь Гюнтера Цехбауера правильна. Просто подумайте про додавання наступного рядка:

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, яка запускається після клацання, і вхідний файл всередині)

Якщо ви хочете імітувати, натисніть на елемент 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();
}

Щоб отримати власне посилання на щось на зразок an ion-input, використовуйте це

@ViewChild('fileInput', { read: ElementRef }) fileInput: ElementRef;

і потім

this.fileInput.nativeElement.querySelector('input').click()