Angular移动端首页无操作时空白，需触摸触发加载求助

我之前碰到过一模一样的问题，这是典型的Angular变更检测未自动触发的情况——Firestore的snapshotChanges()异步回调在移动端环境下，可能运行在Angular的Zone之外，导致数据已经更新，但Angular没察觉到，所以首页一直空白。而你触摸屏幕的操作会手动触发Angular的变更检测周期，这时候视图才会刷新显示内容。

下面是几种可行的解决方案，按推荐程度排序：

1. 优先使用async管道（最简洁可靠） #

async管道会自动处理Observable的订阅、取消订阅，并且在数据更新时自动触发变更检测，完全避免手动处理的麻烦。

修改组件代码： #

// Home.page.ts
import { Observable } from 'rxjs';
import { PublicationModel } from './path-to-your-model';

// 把publications改成Observable类型
publications$: Observable<PublicationModel[]>;

constructor(private pubService: PublicationService) {}

ngOnInit() {
  this.publications$ = this.pubService.getPublications();
}

修改模板代码： #

在模板中用async管道订阅数据：

<div *ngFor="let pub of publications$ | async">
  <!-- 你的出版物内容渲染 -->
</div>

2. 用NgZone将回调拉回Angular Zone #

如果不想修改模板，可以在Service中使用NgZone，确保Firestore的回调逻辑运行在Angular的Zone内，这样数据更新时会自动触发变更检测。

修改Service代码： #

// publication.service.ts
import { NgZone } from '@angular/core';

constructor( 
  private afs: AngularFirestore,
  private zone: NgZone // 注入NgZone
) {
  this.publicationCollection = this.afs.collection<PublicationModel>('publications', ref => ref.orderBy('createdAt', 'desc'));
  this.publications = this.publicationCollection.snapshotChanges().pipe(
    map(pub => {
      // 把数据处理逻辑放到Angular Zone内执行
      return this.zone.run(() => {
        return pub.map(p => {
          const data = p.payload.doc.data();
          const id = p.payload.doc.id;
          return { id, ...data };
        });
      });
    })
  );
}

3. 手动触发变更检测 #

如果上面两种方式都不适用，可以在组件中手动调用变更检测方法，强制Angular刷新视图。

修改组件代码： #

// Home.page.ts
import { ChangeDetectorRef } from '@angular/core';

constructor(
  private pubService: PublicationService,
  private cdr: ChangeDetectorRef // 注入ChangeDetectorRef
) {}

ngOnInit() {
  this.pubService.getPublications().subscribe(pubs => {
    this.publications = pubs;
    // 手动触发变更检测
    this.cdr.detectChanges();
  });
}

额外说明 #

为什么移动端会出现这个问题？因为桌面端浏览器的事件循环机制可能会自动把Firestore的回调拉回Angular Zone，而移动端的某些环境（比如WebView）下，异步回调可能脱离了Zone，导致Angular无法自动检测到数据变化。

内容的提问来源于stack exchange，提问作者Juance