sự kiện nhấp chuột kích hoạt thủ công angle2 trên phần tử cụ thể

Tôi đang cố gắng kích hoạt sự kiện nhấp chuột (hoặc bất kỳ sự kiện nào khác) trên phần tử theo chương trình, Nói cách khác, tôi muốn biết các tính năng tương tự như được cung cấp bởi phương thức jQuery .trigger () trong angle2.

Có bất kỳ phương pháp tích hợp để làm điều này? ..... nếu không, xin vui lòng đề nghị làm thế nào tôi có thể làm điều này

Xem xét đoạn mã sau

<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>

Ở đây khi người dùng nhấp vào btnAdd, nó sẽ kích hoạt sự kiện nhấp chuột trên imgFile

Angular4

Thay vì

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

sử dụng

    this.fileInput.nativeElement.dispatchEvent(event);

vì invokeElementMethodsẽ không còn là một phần của trình kết xuất nữa.

Angular2

Sử dụng ViewChild với biến mẫu để nhận tham chiếu đến đầu vào tệp, sau đó sử dụng Trình kết xuất để gọi dispatchEventkích hoạt sự kiện:

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

Cập nhật

Vì quyền truy cập DOM trực tiếp không được nhóm Angular khuyến khích nữa nên mã đơn giản hơn này cũng có thể được sử dụng

this.fileInput.nativeElement.click()

Xem thêm https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Tôi cũng muốn có chức năng tương tự trong đó tôi có Điều khiển nhập tệp với display:nonevà điều khiển Nút nơi tôi muốn kích hoạt sự kiện nhấp của Điều khiển nhập tệp khi tôi nhấp vào nút, dưới đây là mã để làm như vậy

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

đơn giản như vậy và nó hoạt động hoàn hảo ...

Điều này đã làm việc cho tôi:

<button #loginButton ...

và bên trong bộ điều khiển:

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

Câu trả lời của Günter Zöchbauer là đúng. Chỉ cần xem xét thêm dòng sau:

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

Trong trường hợp của tôi, tôi sẽ gặp lỗi "Lỗi RangeError: Đã vượt quá kích thước ngăn xếp cuộc gọi tối đa" nếu không. (Tôi có thẻ div kích hoạt khi nhấp chuột và tệp đầu vào bên trong)

Nếu bạn muốn bắt chước, hãy nhấp vào phần tử DOM như thế này:

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

và có một cái gì đó như thế này trên trang:

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

chức năng của bạn trong component.tsphải như thế này:

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

Để nhận tham chiếu gốc đến một cái gì đó như an ion-input, ry bằng cách sử dụng

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

và sau đó

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