NX Workspace 中可观察到的 AngularFire 集合触发了两次

Question

我有一个 Angular (v 11.1.1)Project 使用 @angular/fire (6.1.4) 和一个 NX 工作区。 我注意到对集合的查询在调用时会返回两次数据。 如果我使用take(1)它只返回一次，但这会完成 stream 并且不会再发生数据库更新，因此这不是我想要的。

下面涉及的代码。

数据库服务 (db)

import { AngularFirestore } from '@angular/fire/firestore';
import firebase from 'firebase/app';
  
@Injectable({
  providedIn: 'root',  // Provided in the ROOT Injector 
})
export class DbService {

  constructor(private firestoreRef: AngularFirestore) {

// Here just for TEST purposes, just to isolate irrelevant code (eg. component)

// This is triggered twice
firestoreRef.collection('places')
            .valueChanges()
            .subscribe(p => console.log('GOT DATA DIRECT'));
}

我想在共享库中保持数据库服务的通用性，因为我想从 NX 工作区中的其他应用程序中重用它。 这个想法是传递特定于项目的新 Firestore 密钥。

为此，我在共享库中创建了一个“Data-Access-Layer”模块，并将该模块导入app.module.ts中：

@NgModule({
  imports: [
    AngularFireModule.initializeApp(FirebaseConfigService.data),
    AngularFirestoreModule.enablePersistence(),
    AngularFireAuthModule
  ],
  providers: [FirebaseConfigService]
})
export class SharedDataAccessModule {
  static forRoot(data: FirebaseKeysModel): ModuleWithProviders<SharedDataAccessModule> {
    return {
      ngModule: SharedDataAccessModule,
      providers: [
        FirebaseConfigService,
        {
          provide: APP_INITIALIZER,
          multi: true,
          useFactory: (firebaseConfig: FirebaseConfigService) => () => {
            firebaseConfig.setFirebaseConfig(data);
          },
          deps: [FirebaseConfigService]
        }
      ]
    };
  }
}

FirebaseConfig 服务：

export class FirebaseConfigService {
  static data = {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: ''
  };

  setFirebaseConfig(moduleConfig: FirebaseKeysModel) {
    return new Promise<void>((resolve, reject) => {
      FirebaseConfigService.data.projectId = moduleConfig.projectId;
      FirebaseConfigService.data.apiKey = moduleConfig.apiKey;
      FirebaseConfigService.data.authDomain = moduleConfig.authDomain;
      FirebaseConfigService.data.databaseURL = moduleConfig.databaseURL;
    });
  }
}

这允许我在应用程序级别（在 app.module 中）传递特定的数据库密钥：

@NgModule({
  declarations: [AppComponent, NavigationComponent],
  imports: [
    ...
    // These are App specific keys for the DB
    SharedDataAccessModule.forRoot(environment.firebaseConfig),
  bootstrap: [AppComponent],
})
export class AppModule {}

Answer 1

我发现这是使用离线持久性时 Firestore 的预期行为（感谢 Frank van Puffelen）：

当您为快照附加监听器时，它会立即使用数据的本地 state（如果有）触发。 然后它会检查服务器，这可能需要一些时间，然后再次使用来自服务器的 state 触发，如果这与本地缓存不同（或者您已请求通过元数据更改进行调用）。