2017-07-04 171 views
0

我有一個孩子組成部分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> 
+0

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

+0

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

+0

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

回答

1

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

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

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

+0

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

+0

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

+0

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

相關問題