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

Program / 글쓴이

프로그래밍 방식으로 요소에서 클릭 이벤트 (또는 다른 이벤트)를 시작하려고합니다. 즉, 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]);
  }

제 경우에는 “Caught RangeError : Maximum call stack size exceeded”오류가 발생합니다. (클릭시 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사용하십시오.

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

그리고

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

답변