Question

我想触发/打开来自Ionic 4中另一页的文件输入。

在第1页中，我有一个转到模态的按钮，在页面模态中我想自动触发<input file>对话框

组件

ionViewWillEnter() {
    document.getElementById('file').click(); // Tried with this one 1st, this only works in Internet Explorer / Edge
    this.fileInput.nativeElement.click();    // And also this with @ViewChild
}

HTML

<input type="file" name="file" #file id="file" (change)="fileChange($event)" required>

Answer 1

这是我用来触发点击＆lt;输入＆GT; - 元素：

@ViewChild("file") fileInput: ElementRef;

triggerClick() {
    let event = new MouseEvent('click', {bubbles: true});
    this.renderer.invokeElementMethod(this.fileInput.nativeElement, 'dispatchEvent', [event]);
}

Answer 2

改变这个：

ionViewWillEnter() {
    document.getElementById('file').click(); // Tried with this one 1st
    this.fileInput.nativeElement.click();    // And also this with @ViewChild
}

To This：

ionViewDidLoad() {
    document.getElementById('file').click(); // Tried with this one 1st
}

Answer 3

尝试ngAfterViewInit（）之后调用的生命周期钩子组件的视图已完全初始化。

ngAfterViewInit() {
    document.getElementById('file').click();
}

Answer 4

我解决了在page1中插入隐藏的输入文件，当用户尝试转到第2页时，我触发了文件输入。

当用户完成选择文件后，我将文件事件更改发送到第2页并管理第2页中的所有逻辑。

触摸输入文件在页面更改后单击Ionic 4

4 个答案: