ngOnChanges只在有動作時才起作用

我使用XMLHttpRequest創建了我自己的上傳文件組件，一切正常......我唯一的問題是我創建了一個更新上傳進度的回調方法，以便用戶可以看到百分比。ngOnChanges只在有動作時才起作用

如果我做progrees的consolo.log（），我可以看到它是如何從0增加至100

但屏幕不反映......我有這個功能在該組件：

ngOnChanges(){ 
if(this.progress == 100){ 
    this.progress = 0; 
    this.uploading = false; 
} 
}

而且我有一個方法來獲得進展的最新值（從父組件發射）

public updateProgress(progress : number){ 
    this.progress = progress; 
    console.log(this.progress); 
    if(this.progress == 100) 
     this.uploading = false; 
    }

如果模板我有

<div *ngIf="uploading" class="uploading"> 
    <progressbar [max]="100" [value]="progress"><span style="color:white; white-space:nowrap;">{{progress}}/{{100}}</span></progressbar> 
</div>

所以進度條不增加的進展，即使在控制檯中，我可以看到該值的「進步」改變..

但很長一段時間後，我發現，如果做一個點擊用鼠標在屏幕的任意部分ngOnChange被觸發，並且進度條被更新...所以如果我在文件被上傳時開始做點擊，我能夠看到進度...

來源

2017-09-06 Faabass

進樣

constructor(private cdRef:ChangeDetectorRef){}

，並更新progress後，打電話

this.progress = ...; 
this.cdRef.markForCheck();

或

this.progress = ...; 
this.cdRef.detectChanges();

或者你可以注入NgZone

constructor(private zone:NgZone){}

並做

this.zone.run(() => this.progress = ...);

更新這會導致變化檢測運行時代碼角從外面叫角的方式，角度不能識別它。

來源

2017-09-06 14:00:44

謝謝！我使用了區域選項，它的功能就像一個魅力！ – Faabass

很高興聽到:)如果這回答你的問題，請考慮接受答案。 –

我想你錯過了器具OnChanges

import {Component,OnChanges, SimpleChange} from '@angular/core'; 
    export class yourcomponet implements OnChanges { 
    ngOnChanges(changes: {[propKey: string]: SimpleChange}) 
    { 
     // Here goes your logic 
    } 
}

來源

2017-09-06 13:52:56 Robert

我有這樣的組件進口{組件，OnChanges，OnInit的，輸出，輸入，EventEmitter，ViewChild}從'@角/芯'; – Faabass

由於您尚未列出所有代碼，因此不清楚父/子組件如何通信。一方面，父母和孩子似乎都有不同的進步。爲什麼？

另一個問題是爲什麼你使用ngOnChanges？

如果您的孩子組件知道進度的當前值，請在孩子中創建一個@Output變量，並對每個進度變化發出一個事件。

@Output() currentProgres: EventEmitter <number> = new EventEmitter(); 
... 
this.currentProgress.emit(progress);

在父，聽這些事件：

<progressbar [max]="100" (currentProgress)="updateProgress($event)"> 
... 
updateProgress(progress : number){}

家長可以綁定到UI一個變量showProgress所以它會自動更新。

來源

2017-09-06 14:05:15

從我可以看到，在你的子組件，需要用戶輸入的屬性稱爲值但在方法檢查進步的例子。確保你把它放到當地的房產進度中。每次輸入屬性發生變化時，ngOnChanges（）都會觸發。嘗試在ngOnChanges（）之前的任何if（）語句來打印的console.log並檢查值

來源

2017-09-06 14:06:00 JayDeeEss

ngOnChanges只在有動作時才起作用

回答

相關問題