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

问题描述：

我有一个孩子组成部分file-upload这是我在父组件中多次使用如下多个子组件具有相同的实例angular2

<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和我使用它的方式..当我使用一个简单的按钮，每件事情都很好。这里是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>

你应该与普朗克分享一个例子。没有足够的代码来弄清楚什么是错的。 –

“文件上传”组件是否共享服务或其他内容？ – rinukkusu

你能分享.ts文件中的代码吗？ –

答

的HTML你有一个单的FileService这就是为什么它们都有相同的服务实例。我假设你注入你的供应商在你的AppModule，因此将其删除，并尝试在组件级这样

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

注入你的服务有关多个服务实例的详细信息，看看这个from official docs。希望这会有所帮助

只有'FileService'的'url'字段被使用 - 你真的认为，这是问题吗？ – rinukkusu

@rinukkusu如果仅使用FileService的url字段，则无关紧要，如果它是单例，那么您的子组件将共享此实例。你有没有试过我的答案？ :) – brijmcq

我试过答案..但它不是因为这个..我发现了这个问题，但我不知道如何解决它。它是在文件上传器的HTML，这是因为“输入”..我已经更新我的问题，以显示确切的问题@brijmcq – Parid0kht

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

相关推荐