javascript - 父组件中的多个子组件具有相同的实例 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 中的每个输入都会发生变化code> 组件仅适用于其中一个(第一个)。

问题出在输入以及我使用它的方式上。当我使用一个简单的按钮时，一切都很好。这是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，这就是为什么它们都具有该服务的相同实例。我假设您将提供程序注入(inject)到 AppModule 中，因此将其删除并尝试在组件级别注入(inject)您的服务，如下所示

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

有关多个服务实例的更多信息，请查看此 from official docs 。 希望这有帮助