多個子組件具有相同的實例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>

來源

2017-07-04 Parid0kht

你應該與普朗克分享一個例子。沒有足夠的代碼來弄清楚什麼是錯的。 –

「文件上傳」組件是否共享服務或其他內容？ – rinukkusu

你能分享.ts文件中的代碼嗎？ –

的HTML你有一個單的FileService這就是爲什麼它們都有相同的服務實例。我假設你注入你的供應商在你的AppModule，因此將其刪除，並嘗試在組件級這樣

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

注入你的服務有關多個服務實例的詳細信息，看看這個from official docs。希望這會有所幫助

來源

2017-07-04 08:00:24 brijmcq

只有'FileService'的'url'字段被使用 - 你真的認爲，這是問題嗎？ – rinukkusu

@rinukkusu如果僅使用FileService的url字段，則無關緊要，如果它是單例，那麼您的子組件將共享此實例。你有沒有試過我的答案？ :) – brijmcq

我試過答案..但它不是因爲這個..我發現了這個問題，但我不知道如何解決它。它是在文件上傳器的HTML，這是因爲「輸入」..我已經更新我的問題，以顯示確切的問題@brijmcq – Parid0kht

多個子組件具有相同的實例angular2

回答

相關問題