Angular2：视图未从订阅内部更新

Question

我有一个订阅服务的简单 angular2 (rc1) 组件。当服务更新订阅时，我可以在组件的订阅中记录结果，但视图没有更新。

我最初的怀疑是我的内部this 没有绑定到外部，但是我在subscribe 回调上使用了一个粗箭头，并且还在第一行尝试了旧的let self = this构造函数，然后执行self.SuccessMessage = result 无济于事。

我必须以某种方式强制更改检测吗？这是我的组件：

import {Component} from 'angular2/core';
import {Subscription} from 'rxjs/Subscription';

import {UploaderService} from './uploader.service';

@Component({
  selector: 'aoma-uploader-status-mini',
  providers: [],
  viewProviders: [],
  templateUrl: './app/uploader/mini-uploader-status.component.html'
})
export class MiniUploadStatusComponent {
  subscription:Subscription;
  successMessage:any = {};

  constructor(private _uploaderService: UploaderService) {
    // view correctly shows this value:
    this.successMessage.serverMessage = 'before ';
    this.subscription = _uploaderService.fileSuccess$.subscribe(result => {
        // this fires and logs the result correctly:
        console.log('the mini uploader: type of result', result);
        // view is never updated here
        this.successMessage = result;
      })
  }

}

目前我的视图中只有{{ successMessage | json }}。它再次正确显示“之前”值，但在订阅获取结果对象时不会改变。

Answer 1

看起来_uploaderService 在 Angulars 区域之外运行。当值从其区域之外更改时，Angular 不会检测到更改。

要使代码在区域内运行，请使用

  constructor(private _uploaderService: UploaderService, private zone:NgZone) {
    // view correctly shows this value:
    this.successMessage.serverMessage = 'before ';
    this.subscription = _uploaderService.fileSuccess$.subscribe(result => {
        // this fires and logs the result correctly:
        console.log('the mini uploader: type of result', result);
        // view is never updated here

        this.zone.run(() => this.successMessage = result);
      })
  }

还有其他方法可以将更改通知 Angular Manual Change Detection in AngularJS or Angular 2?

如果在区域外调用router.navigate() 时运行其他代码，则只有zone.run(...) 可以正确解决问题 - 除非有办法让您的服务首先在 Angulars 区域内运行。