Question

我的Angular应用中有一个MealsModule。在其中有SharedModule。

在SharedModule中，我在使用FireBase作为数据库的提供程序中具有MealsService。这是我的SharedModules：

import {ModuleWithProviders, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';


import {AngularFireDatabaseModule} from 'angularfire2/database';
import {MealsService} from './services/meals.service';
import {ListItemComponent} from './components/list-item/list-item.component';

@NgModule({
  declarations: [ListItemComponent],
  imports: [
    CommonModule,
    RouterModule,
    AngularFireDatabaseModule
  ],
  exports: [
    ListItemComponent
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        MealsService
      ]
    };
  }
}

这是我的MealsService：

import {Injectable} from '@angular/core';
import {Store} from '../../../store';
import {AngularFireDatabase} from 'angularfire2/database';
import {AuthService} from '../../../auth/shared/services/auth.service';
import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';

export interface Meal {
  name: string;
  ingredients: string[];
  timestamp: number;
  $key: string;
  $exists: () => boolean;
}

@Injectable()
export class MealsService {

  meals$: Observable<Meal[]> = this.db.list(`meals/${this.uid}`)
    .pipe(
      tap(next => this.store.set('meals', next))
    );

  constructor(
    private store: Store,
    private db: AngularFireDatabase,
    private authService: AuthService
  ) {
  }

  get uid() {
    return this.authService.user.uid;
  }

  addMeal(meal: Meal) {
    return this.db.list(`meals/${this.uid}`).push(meal);
  }

  removeMeal(key: string) {
    return this.db.list(`meals/${this.uid}`).remove(key);
  }
}

我在用餐方面有问题$在这里可以观察到。当我从应用程序注销并与其他用户登录时，由于已注册了observable且从未销毁MealsService，因此uid不会更新。

我当前的解决方案是直接在列出餐食的组件中提供MailService而不是SharedModule。由于MealsService已被组件破坏，因此可以使用。

这是最好的方法还是更好的方法？

Answer 1

问题来自于创建服务时node_modules/* Observable仅创建一次的事实。由于该服务是Singleton，因此在meal$中提供时，该值将永远不会更改，并且动态url将是root的初始值。当您在this.uid中提供此服务时，将为创建的Component的每个实例创建一个新的服务实例，并在销毁每个Component时将其销毁。

要解决此问题，每当authService更新用户时，您都需要重新分配Observable。这可以通过在AuthService中提供Observable并在用户更新时发出值来完成。例如：

Component

Angular：如何在动态路线中处理Observable？

1 个答案: