浏览器后退按钮致数据完全无法加载——Angular+Firebase应用问题

看起来你遇到了后退后数据无法加载的常见问题，我来帮你分析几个可能的原因和对应的解决方案：

1. 组件订阅未重新触发 #

如果你的组件是在ngOnInit里手动订阅Observable，但后退时组件实例被复用（Angular默认的路由复用策略），ngOnInit不会再次执行，导致新的订阅没建立。

解决方案：使用Async管道
Async管道会自动管理订阅和取消订阅，而且每次组件渲染时都会重新订阅流，完美解决后退复用组件的问题：

在组件模板里：

<div *ngFor="let post of posts$ | async">
  <!-- 渲染你的post内容 -->
</div>

组件类里：

import { Observable } from 'rxjs';
import { Post } from './post.model';
import { FirebaseService } from './firebase.service';

export class PostsComponent {
  posts$: Observable<Post[]>;

  constructor(private firebaseService: FirebaseService) {}

  ngOnInit() {
    this.posts$ = this.firebaseService.posts;
  }
}

2. 路由复用导致组件未重新初始化 #

Angular默认会复用路由组件实例，后退时不会重新执行ngOnInit。你可以强制路由每次激活时都执行守卫和解析器：

修改路由配置：

import { Routes } from '@angular/router';
import { PostsComponent } from './posts.component';

const routes: Routes = [
  {
    path: 'posts',
    component: PostsComponent,
    runGuardsAndResolvers: 'always' // 强制每次激活都执行
  },
  // 其他路由
];

或者在组件里监听路由变化，手动触发数据加载：

import { ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs/operators';

export class PostsComponent {
  posts: Post[];
  private postsSub: Subscription;

  constructor(
    private route: ActivatedRoute,
    private firebaseService: FirebaseService
  ) {}

  ngOnInit() {
    this.loadPosts();
    // 监听路由变化，后退时重新加载
    this.route.url.pipe(
      filter(() => !!this.route.snapshot)
    ).subscribe(() => {
      this.loadPosts();
    });
  }

  private loadPosts() {
    if (this.postsSub) {
      this.postsSub.unsubscribe();
    }
    this.postsSub = this.firebaseService.posts.subscribe(posts => {
      this.posts = posts;
    });
  }

  ngOnDestroy() {
    if (this.postsSub) {
      this.postsSub.unsubscribe();
    }
  }
}

3. 检查FirebaseService的数据流是否正确 #

确保你的posts Observable是持续监听Firestore变化的冷Observable，完整的service代码应该是这样的：

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Post } from './post.model';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  postsCollection: AngularFirestoreCollection<Post>;
  posts: Observable<Post[]>;

  constructor(public afs: AngularFirestore) {
    this.postsCollection = this.afs.collection<Post>('posts');
    // 正确映射snapshotChanges的数据，包含文档ID
    this.posts = this.postsCollection.snapshotChanges().pipe(
      map(changes => {
        return changes.map(a => {
          const data = a.payload.doc.data() as Post;
          data.id = a.payload.doc.id;
          return data;
        });
      })
    );
  }
}

如果你的map操作不完整（比如没返回数据），会导致数据流没有值，后退自然加载不到数据。

4. 内存泄漏导致订阅失效 #

如果组件销毁时没有取消手动订阅，会导致内存泄漏，后续的订阅可能无法正常工作。一定要在ngOnDestroy里取消订阅，就像上面代码里那样。

先试试这些方案，大部分情况下用Async管道就能解决问题，因为它简化了订阅管理，还能避免内存泄漏。

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