1

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

<!--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() 会更新“siteMapTree”，但更改不会反映在 UI 中。

2）为了测试，我在 SiteMapComponent 组件中有一个按钮 Refresh 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;
  }
}
4

1 回答 1

1

您可以使用tick()from 方法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

于 2017-07-24T18:33:25.850 回答