親コンポーネントの角2のトリガーファイルのアップロード

Question

ルータの親コンポーネントでファイルアップロードをトリガーしたい。親にある2つの関数、openFileSelectおよびuploadSelectedFileを呼び出して<input type="file">要素を制御する必要があります。

私のルータは次のようになります。私はHomeComponent.tsに続いて

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

：

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

ファイル入力は、子コンポーネントが表示されているHomeComponent.htmlテンプレートおよびルータアウトレットであります持っている：

最後に私は同じopenFileSelectメソッドをトリガーしたいUploadComponent

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

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

    constructor() { } 

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

内部HomeComponentだから、私は2つの質問があります。プログラム的にイベントをクリックトリガするためにどのように

• を？

• 子コンポーネントからルータの親コンポーネントに関数を呼び出す方法はありますか？

Answer 1

ここにあなたの質問に類似の答えがあります： jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?

は、たぶん、それはあなたのアイデアを与えるだろう。または、primeNgのFileUploadコントロールのようなUIコントロールを使用することもできます。