[解決済み] angular2 特定の要素に対して手動でクリックイベントを発生させる

質問

私はプログラム的に要素のクリックイベント（または他のイベント）を発生させようとしています。言い換えれば、私はangular2でjQuery .trigger()メソッドが提供するのと同様の機能を知りたいのです。



これを行うための組み込みのメソッドはありますか？......もしそうでなければ、どうすればいいか提案してください。

次のようなコードを考えてみましょう。

<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

使用方法 ビュー子 をテンプレート変数と一緒に使って、入力されたファイルへの参照を取得し、それから レンダラ を呼び出して 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