angular2는 특정 요소에서 수동으로 클릭 이벤트를 발생시킵니다.

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을

---

Angular4

대신에

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

사용하다

    this.fileInput.nativeElement.dispatchEvent(event);

invokeElementMethod더 이상 렌더러의 일부가 아니기 때문 입니다.

Angular2

템플릿 변수와 함께 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]);
  }
}

최신 정보

Angular 팀은 직접 DOM 액세스를 더 이상 권장하지 않으므로이 간단한 코드도 사용할 수 있습니다.

this.fileInput.nativeElement.click()

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent 도 참조하십시오.

---

나는 또한 내가 가지고 비슷한 기능을 원하는 파일 입력 제어 와 display:none와 Button 컨트롤 I 트리거에 원 클릭 이벤트 내가 버튼을 클릭 파일 입력 컨트롤을 아래 그렇게 할 수있는 코드

<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ünter Zö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]);
  }

In my case I would get a "caught RangeError: Maximum call stack size exceeded" error if not. (I have a div card firing on click and the input file inside)

---

If you want to imitate click on the DOM element like this:

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

and have something like this on the page:

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

your function in component.ts should be like this:

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

참고URL : https://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element