angle2は特定の要素でクリックイベントを手動で発生させます

プログラムで要素に対してクリックイベント（またはその他のイベント）を発生させようとしています。言い換えると、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を

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

更新

AngularチームはDOMへの直接アクセスを推奨しなくなったため、この単純なコードも使用できます。

this.fileInput.nativeElement.click()

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEventも参照してください

また、ファイル入力コントロールとボタンコントロールがdisplay:noneあり、ボタンをクリックしたときにファイル入力コントロールのクリックイベントをトリガーしたい同様の機能が必要でした。以下はそのためのコードです。

<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();

GünterZö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カードが起動し、入力ファイルが内部にあります）

模倣したい場合は、次のように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();
}

のようなものへのネイティブ参照を取得するにはion-input、これを使用してry

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

その後

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