Angular 2在父组件中触发文件上传

Question

我想在路由器父组件中触发文件上传。它应该调用父级中存在的两个函数openFileSelect 和uploadSelectedFile 来控制<input type="file"> 元素。

我的路由器是这样的：

{ 
    path: '', 
    component: HomeComponent,
    canActivate: [AuthService],
    children: [
        {
            path: '',
            redirectTo: '/dashboard',
            pathMatch: 'full'
        },
        {
            path: 'dashboard',
            component: DashboardComponent
        },
        {
            path: 'upload',
            component: UploadComponent
        }
    ]
}

文件输入在HomeComponent.html模板和子组件展示的router-outlet中：

<div class="container">
    <input type="file" (change)="fileChangeEvent($event)" #fileUpload>
    <router-outlet></router-outlet>
</div>

然后在 HomeComponent.ts 我有：

import { Component } from "@angular/core";

@Component({
    templateUrl: "home.component.html",
})
export class HomeComponent {

    filesToUpload: Array<File>;

    constructor() {
        this.filesToUpload = [];
    }

    openFileSelect() {
        // TODO - How to programmatically trigger click event on <input type="file"> ?
    }

    uploadSelectedFile() {
        this.makeFileRequest("http://localhost:3000/upload", [], this.filesToUpload).then((result) => {
             console.log(result);
        }, (error) => {
             console.error(error);
        });
    }

    fileChangeEvent(fileInput: any){
        this.filesToUpload = <Array<File>> fileInput.target.files;
    }

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
        ... XHR request ...
    }
}

最后我想从 UploadComponent 内部的 HomeComponent 触发相同的 openFileSelect 方法

import { Component } from "@angular/core";

@Component({
    templateUrl: "upload.component.html",
})
export class UploadComponent {

    constructor() { }

    openFileSelectInHomeComponent() {
        // TODO - how to call HomeComponent.openFileSelect() ?
    }
}

所以我有两个问题：

• 如何以编程方式触发点击事件？

• 以及如何从子组件调用函数到路由父组件？

Answer 1

您的问题在这里有类似的答案： jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?

也许它会给你一个想法。或者你可以使用一个 UI 控件，比如 primeNg 的 FileUpload 控件。