Выполнение щелчка по объекту ElementRef в Angular 4 [duplicate]
Вы можете использовать maven-dependency-plugin, но вопрос заключается в том, как создать исполняемый JAR. Для этого требуется следующее изменение в ответе Мэтью Франглен (кстати, использование плагина зависимостей занимает больше времени, чтобы строить при запуске с чистой цели):
<build>
<plugins>
<plugin>
<artifactId>maven-jar-plugin</artifactId>
<configuration>
<archive>
<manifest>
<mainClass>fully.qualified.MainClass</mainClass>
</manifest>
</archive>
</configuration>
</plugin>
<plugin>
<artifactId>maven-dependency-plugin</artifactId>
<executions>
<execution>
<id>unpack-dependencies</id>
<phase>package</phase>
<goals>
<goal>unpack-dependencies</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
<resources>
<resource>
<directory>${basedir}/target/dependency</directory>
</resource>
</resources>
</build>
4 ответа
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]);
}
}
Обновить
Поскольку прямой доступ DOM больше не обескуражен командой Angular, этот простой код также может использоваться
this.fileInput.nativeElement.click()
См. также https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
-
1– Ben 5 October 2016 в 16:47
-
2– lbrahim 22 December 2016 в 09:59
-
3– Günter Zöchbauer 22 December 2016 в 10:01
-
4– Günter Zöchbauer 1 February 2017 в 14:38
-
5– Günter Zöchbauer 12 May 2017 в 09:25
Мне также нужна была аналогичная функциональность, где у меня есть управление входными файлами с помощью display:none и элемент управления Button, где я хотел вызвать событие click управления входными файлами, когда я нажимаю кнопку, ниже код для этого
<input type="button" (click)="fileInput.click()" class="btn btn-primary" value="Add From File">
<input type="file" style="display:none;" #fileInput/>
настолько прост, как этот, и он работает безупречно ...
-
1– DJDaveMark 6 April 2018 в 09:06
Ответ Гюнтера Цохбауэра правильный. Просто подумайте о добавлении следующей строки:
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-карты по щелчку и входной файл внутри)
-
1– ChicoDelaBarrio 9 June 2016 в 07:21
Это сработало для меня:
<button #loginButton ...
и внутри контроллера:
@ViewChild('loginButton') loginButton;
...
this.loginButton.getNativeElement().click();
-
1– DwlRathod 1 August 2018 в 20:52