即使模型的数据发生变化也无法更新 UI（使用 Angular 4 - observables）

Question

1) 我有 SiteMap 组件，它显示： a) 3 个按钮：确认、再次上传文件、更新 UI（用于测试） b) Component TreeView：这需要一个数组作为输入并显示它 在用户界面上。

<!--siteMap-component.html -->
<div class="tree">
  <tree-view [siteTree]="siteMapTree">

  </tree-view>
</div>
<div class="col-xs-12">
  <button type="button" class="pull-right btn-primary" (click)="approveAndUploadLandingPages()">Confirm</button>
  <button type="button" class="pull-left btn-inverse" (click)="updateSiteMapTree()">Refresh UI</button>
  <button type="button" class="pull-left btn-inverse" (click)="uploadAgain()">Upload Again</button>
</div>

2) 我有一个 siteMapDataObservable，它是用一个值初始化的。现在这个 Observable 的值会在 updateSiteMapTree() 调用 this.siteMapDataObservable.next() 时更新。

// SitemapComponent
import ...
@Component({
  selector: 'app-gb-sitemap',
  templateUrl: './sitemap.component.html',
  styleUrls: ['./sitemap.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SitemapComponent implements OnInit {

  siteMapTree: Array<any>;
  siteMapDataObservable: BehaviorSubject<Object> = new BehaviorSubject<Object>(this.contactServerService.getSiteMapObject());


  constructor(private contactServerService: ContactServerService, private route: ActivatedRoute, private router: Router, public modal: Modal) {
  }

  updateSiteMapTree() {
    this.siteMapDataObservable.next(this.contactServerService.getSiteMapObject());// this.contactServerService.getSiteMapObject() retrieves the data from sessionStorage
  }

  uploadAgain() {
    return this.modal.open(CustomModalComponent,  overlayConfigFactory({ }, BSModalContext));
  }

  rejectUpload() {
    this.router.navigate(['/home']);
    this.clearSessionStorage();
  }

  approveAndUploadLandingPages() {
    this.contactServerService.uploadLandingPages(this.landingPagesObj)
      .subscribe(
        (response) => {
          console.log(response);
          this.clearSessionStorage();
          this.router.navigate(['/']);
        },
        (error) => console.log(error)
      );
  }

  clearSessionStorage() {
    sessionStorage.removeItem('siteMapTree');
  }


  ngOnInit() {
    this.siteMapDataObservable
      .subscribe(
        siteMapTreeObj => {
          this.siteMapTree = [siteMapTreeObj['tree']];
        }
    );
  }
}

3) 再次上传按钮打开一个模态； CustomModalComponent 用于从用户那里获取另一个文件，在 http 的回调中，修改数据模型并调用 SiteMapComponent 中的 updateSiteMapTree() 以更新 siteMapTree。

// CustomModalComponent
import ...
@Component({
  selector: 'modal-content',
  templateUrl: './custom-modal-sample.html',
  encapsulation: ViewEncapsulation.None,
  providers: [SitemapComponent],
  styleUrls: ['./custom-modal-sample.scss']
})


export class CustomModalComponent implements OnInit {
  fileTypes: Array<string>;

  private uploadExcelUrl: string;
  public uploaderExcel: FileUploader;

  constructor(private router: Router, public dialog: DialogRef<any>, private contactServerService: ContactServerService,
              private siteMapComponent: SitemapComponent) {
    this.fileTypes = ['.xls', '.xlsx'];

    this.uploadExcelUrl = this.contactServerService.getExcelUploadUrl();
    this.uploaderExcel = new FileUploader({url: this.uploadExcelUrl});
  }

  ngOnInit() {

    this.uploaderExcel.onSuccessItem = function(fileItem, response, status, headers) {
      fileItem.remove();

      const RESPONSE_DATA = JSON.parse(response);
      sessionStorage.setItem('landingPagesTree', JSON.stringify(RESPONSE_DATA));

      dialogBox.dismiss();

    };

    this.siteMapComponent.updateSiteMapTree();
  }

  getNextRouteState() {
    return this.router;
  }

  clearError() {
    this.dialog.dismiss();
  }
}

发现：1) 从 CustomModalComponent 调用 SiteMapComponent 中的 updateSiteMapTree() 会更新“siteMapTree”，但更改不会反映在 UI 中。

2) 为了测试，我在 SiteMapComponent 组件中有一个按钮 Refresh UI，它也调用 updateSiteMapTree()。但是，单击此按钮会更新 UI。

问题： 1) 为什么当我从 CustomModalComponent 调用 SiteMapComponent 中的 updateSiteMapTree() 时我的 UI 没有更新，即使我的数据模型已更改。

2) 当我通过单击同一组件中的按钮调用 SiteMapComponent 中的 updateSiteMapTree() 时，UI 是如何变化的。

编辑： 添加树视图组件

import ...;

@Component({
  selector: 'tree-view',
  templateUrl: './tree-view.component.html',
  styleUrls: ['./tree-view.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class TreeViewComponent implements OnInit, OnChanges {

  @Input() siteTree: Array<any>;

  warnings: Array<string>;

  constructor() {
    this.warnings = [];
  }

  ngOnInit() {
  }

  ngOnChanges ( ...args: any[]) {
    console.log('OnChange');
    console.log(this.siteTree);
  }

  toggle(subtree) {
    subtree.showChild = !subtree.showChild;
  }
}

Answer 1

您可以使用ApplicationRef 中的tick() 方法强制检测更改。

@Injectable()
export class Service {

    constructor(private appref: ApplicationRef){}

    public someMethod():void {
          //some actions, ie pushing next value to observable
          this.appref.tick();
    } 
}

https://angular.io/api/core/ApplicationRef