ngOnChanges 仅在有动作时工作

Question

我使用 XMLHttpRequest 创建了自己的上传文件组件，一切正常...我遇到的唯一问题是我创建了一个回调方法来更新上传进度，以便用户可以看到百分比。

如果我对进度执行 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>

所以进度条没有增加进度，即使在控制台中我可以看到 'progress' 的值在变化..

但很长一段时间后，我发现如果在屏幕的任何部分用鼠标单击，ngOnChange 会被触发，进度条也会更新...所以如果我在文件正在运行时开始单击正在上传我可以看到进度...

Answer 1

我想你错过了 实现 OnChanges

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

Answer 2

注入

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

当从外部 Angular 以 Angular 无法识别的方式调用 Angular 代码时，这会导致对运行的更改检测。

Answer 3

由于您没有列出所有代码，因此不清楚 parent/child 组件如何通信。一方面，似乎 parent 和 child 都有可变的进度。为什么？

另一个问题是您为什么要使用 ngOnChanges？

如果您的 child 组件知道进度的当前值，请在 child 中创建一个 @Output 变量，并在每次进度更改时发出一个事件。

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

在 parent 中，监听这些事件：

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

parent 可以将变量 showProgress 绑定到 UI，这样它会自动更新。

Answer 4

从示例中我可以看到，在您的子组件中，您正在输入名为 value 的属性，但在方法检查中 progress.确保将其放入本地属性进度中。 ngOnChanges() 将在每次任何输入属性更改时触发。尝试在任何 if() 语句之前在 ngOnChanges() 中打印 console.log 并检查 value

ngOnChanges 仅在有动作时工作

ngOnChanges working only when there is an action

angular2-template

ngonchanges

angular