数据绑定 – 当变量发生更改时,Angular2组件视图不会更新

现在,您手动订阅一个observable – httpFileService.progress $ – 然后手动更新子ProgressBar组件上的属性,绕过angular的更改检测机制 – 这就是UI未更新的原因.您可以在设置此属性后手动触发更改检测,并且UI将按预期更新 – 但同样,您将反对该框架,所以让我们看看如何使用它：

我假设“其他地方”是ProgressBar组件的父级 – 让我们调用ElsewhereComponent.

@Component({
  selector: 'elsewhere',directives: [ProgressBar],template: ` 
    <div>
      <progress-bar [currentProgress]="httpFileService.progress$"></progress-bar>
    </div>  
   `
})
class ElsewhereComponent { 
  // you can remove the ngOnInit and onProgress functions you posted
  // you also don't need a reference to the child ProgressBar component
  // ... whatever else you have in this class ...
}

这里要注意的最重要的事情是在progress-bar组件上添加了[currentProgress]：这就是告诉angular,在该组件上有一个名为currentProgress的输入属性应绑定到httpFileService.progress $.

但你现在已经撒谎了 – 就像它所说的那样,ProgressBar根本就没有输入,当它试图将这个不存在的属性绑定到给定值时,angular会告诉你它.所以我们需要添加输入属性,首选方法是使用Input()装饰器：

@Component({
  selector : 'progress-bar',pipes: [AsyncPipe]  //import this from angular2/core
  template : `
    <div class="progress-container">
      <div>{{currentProgress | async}}</div>
      <div [style.width.%]="currentProgress | async" class="progress"></div>
    </div>
  `
})
export class ProgressBar {
  @Input() currentProgress: Observable<number>;
  ...
  constructor(){ 
     // remove the line you have in here now
  }

}

这里有两个关键的区别：首先,@ Input()告诉angular currentProgress是一个输入属性.我们还将该属性的类型从数字更改为Observable< number> – 这不是绝对必要的,但它很有用,因为它允许第二个关键区别：

AsyncPipe已添加到组件的管道中,并在其与currentProgress的两个模板绑定中使用.这很有用,因为它告诉angular处理订阅Observable的所有脏工作,并在每次发出新值时更新UI.

这就是所需要的：条形图的宽度和它上面的文本现在都会自动更新,以反映从httpFileService发出的值,而且您不必编写一行实现它的命令性代码.