アクションがあるときにのみ動作するngOnChanges

Question

XMLHttpRequestを使用して独自のアップロードファイルコンポーネントを作成しても問題なく動作します...唯一の問題は、アップロードの進行状況を更新するコールバックメソッドを作成することですパーセンテージを見ることができます。

私は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; 
    } 

の最新の値を取得するメソッドを持っているテンプレートは、私が

012を持っている場合

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

だから、プログレスバーがコンソールに、私は値が変化して「進歩」であることが確認できた場合にも進展が増加されていません。..

しかし、長い時間の後、私は場合は、クリック操作を行うことを発見画面の任意のセクションにマウスを置くとngOnChangeが起動し、進行状況バーが更新されます...ファイルがアップロードされている間にクリックを開始すると、進行状況を確認できます。

Answer 1

を注入

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 = ...); 

で更新を行う角度コードは角度がそれを認識できないような方法で角外から呼び出されたとき、これは、変化検出を実行させます。

Answer 2

私はあなたが逃したと思いますはOnChangesを実装します

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

Answer 3

すべてのコードをリストしていないので、親子コンポーネントがどのように通信するかは不明です。一方では、親と子の両方が変化する進歩を遂げているようです。どうして？

もう1つの質問は、なぜngOnChangesを使用しているかです。

子コンポーネントが進行状況の現在値を認識している場合は、子に@Output変数を作成し、各進捗状況の変更時にイベントを発行します。親で

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

、これらのイベントに耳を傾ける：それは自動的に更新されますので

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

親がUIにバインドされた変数showProgressを持つことができます。

Answer 4

例から、私はあなたの子コンポーネントにあなたが値しかし進捗をチェックする方法でというプロパティを入力していることがわかります。あなたが地元の財産の進歩にそれを入れていることを確認してください。 ngOnChanges（）は、入力プロパティが変更されるたびに発生します。から{持つEventEmitter、ViewChild、コンポーネント、OnChanges、のOnInit、出力、入力}私はコンポーネント インポートでこれを持ってあれば（）文の前に）（あなたのngOnChangesではconsole.logを印刷しようと値