父组件中的多个子组件具有相同的实例angular2。

Question

我有一个子组件file-upload，我在父组件中多次使用它，如下所示

<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>

​

在UI中，一切都很好，但实际上似乎只有一个file-upload对象实例在工作，每个file-upload组件中的每个输入更改都只适用于其中一个组件(第一个)。

问题是对于input和我使用it..when的方式我使用一个简单的按钮，每件事都是好的。以下是file-upload的html

    <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

您有一个单例 FileService，这就是为什么它们都具有相同的服务实例的原因。我假设您在您的AppModule中注入您的提供程序，所以请删除它，并尝试在组件级别注入您的服务，如下所示

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

有关多个服务实例的更多信息，请查看此来自官方文件。希望这能有所帮助