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
템플릿 변수와 함께 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 team에 의해 직접적인 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();
어떤 것에 대한 네이티브 레퍼런스를 얻는 것.ion-input
, 이걸 이용해서 ry.
@ViewChild('fileInput', { read: ElementRef }) fileInput: ElementRef;
그리고 나서.
this.fileInput.nativeElement.querySelector('input').click()
귄터 쇠치바우어의 대답이 맞습니다.다음 행을 추가하는 것을 고려해 보십시오.
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: Maximum Call Stack Size exceed" 오류가 발생합니다. (클릭 시 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();
}
언급URL : https://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element
'programing' 카테고리의 다른 글
Swagger / springfox 자동으로 응답 예제 생성 (0) | 2023.11.04 |
---|---|
응용 프로그램 개발자가 저지른 데이터베이스 개발 실수 (0) | 2023.10.30 |
hibernate 및 SQL에서 문자열 쿼리의 밑줄을 탈출하는 방법? (0) | 2023.10.30 |
WP_Query() - meta_query OR tax_query (0) | 2023.10.30 |
16진수로 된 요소의 배경색 코드를 얻는 방법은? (0) | 2023.10.30 |