Question

1）我有SiteMap组件显示： a）3个按钮：确认，再次上传文件，更新UI（用于测试） b）组件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，用值初始化。现在只要有来自updateSiteMapTree（）的this.siteMapDataObservable.next（）调用，就会更新此Observable的值。

// 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（）会更新＆＃39; siteMapTree＆＃39;但这一变化并未反映在用户界面中。

2）为了测试，我在SiteMapComponent组件中有一个按钮刷新UI，它也调用updateSiteMapTree（）。但是，单击此按钮可更新UI。

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

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

修改添加TreeViewComponent

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

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

@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

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

1 个答案: