複数の子コンポーネントが同じインスタンスが

Question

をangular2している私は私が親コンポーネントで使用子コンポーネントfile-upload UIのすべてで

<form> 
<fieldset> 
    <legend>Input Files</legend> 

    <file-upload id="s" imgpath="Image/saham.png" title="saham"></file-upload> 
    <file-upload id="q" imgpath="Image/sandoq.png" title="sandoq"></file-upload> 
    <file-upload id="o" imgpath="Image/oraq.png" title="oraq"></file-upload> 

    <button type="submit" class="btn btn-success" (click)="save()" [disabled]="!cansave">Save</button> 
</fieldset> 

以下のような複数回の罰金ですが、アクションでを持っていますfile-uploadというオブジェクトインスタンスが1つしか存在せず、file-uploadコンポーネントの各入力変更は、そのうちの1つ（最初のもの）にのみ適用されます。

問題はinputと私はそれを使用している方法です。私は単純なボタンを使用すると、すべての問題はありません。ここでは、それらはすべて、そのサービスの同じインスタンスを持っている理由だシングルトン FileServiceを持ってfile-upload

<div class="upload" (dragover)="allowDrop($event)" (drop)="drop($event)"> 
    <p>{{title}}</p> 
    <div class="drop-zone" [ngClass]="{'showdropzone' : showdropzone}"> 
     Drop Here Or... 
     <div class="clickhere"> 
      <label for="files">Click Here</label> 
      <input id="files" type="file" class="file" (change)="fileSelect($event)"><!--does not work--> 
      <button (click)="fileSelect($event)">Click Me</button> <!--this is working--> 
     </div> 
    </div> 
    <circle-progress class="myprogress" #circleProg1 [percent]="50" [ngClass]="{'showprogress' : showprogress}"></circle-progress> 
    <span class="glyphicon glyphicon-warning-sign status" [ngClass]="{'warninput' : haswarning}"></span> 
    <span class="glyphicon glyphicon-ok-circle status"  [ngClass]="{'successinput' : succeeded}"></span> 
</div> 

Answer 1

のhtmlです。私はあなたのAppModuleでプロバイダを注入するので、それを削除し、このfrom official docsを見て、複数のサービスインスタンスの詳細については、この

@Component){ 
    providers: [FileService] 
    ... 
} 
export class FileUploadComponent 

などのコンポーネントレベルであなたのサービスを注入しようとすると仮定しています。 ほしいと思っています。