通过Observable设置的属性在routerLink跳转后丢失值问题

嘿，我碰到过类似的AngularFire路由跳转数据丢失的问题，给你几个实用的排查和解决思路：

问题根源分析 #

你遇到的核心问题是：路由跳转导致组件销毁重建后，AngularFire的Observable没有正确恢复数据——要么是订阅没重新建立，要么是没有缓存之前的Firestore数据，导致组件初始化时无法立刻拿到值，只有Firestore触发变更或页面刷新才会重新加载。

具体解决方案 #

1. 给Service的Observable添加缓存（关键！）

在你的AccountService里，给返回的Firestore Observable加上shareReplay(1)操作符，这样它会缓存最新的一次数据，组件重新订阅时不用重新请求Firestore，直接拿到缓存值：

import { shareReplay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AccountService {
  getAccounts(): Observable<Account[]> {
    return this.firestore.collection<Account>('accounts').valueChanges()
      .pipe(
        shareReplay(1) // 缓存最新数据，新订阅直接复用
      );
  }
}

2. 用Async管道管理订阅生命周期

别再手动订阅后把值赋值给普通属性了！把Observable直接绑定到组件属性，用Angular的async管道在模板里渲染——它会自动帮你处理订阅和取消订阅，组件重建时也会重新订阅：

组件代码：

export class AccountsComponent implements OnInit {
  // 直接声明Observable类型的属性
  accounts$: Observable<Account[]>;

  constructor(private accountService: AccountService) {}

  ngOnInit(): void {
    this.accounts$ = this.accountService.getAccounts();
    // 要打印的话，订阅一次就行，不影响async管道
    this.accounts$.subscribe(accounts => {
      console.log('当前账户列表:', accounts);
    });
  }
}

模板代码：

<!-- 用async管道自动订阅渲染 -->
<div *ngFor="let account of accounts$ | async">
  {{ account.account_id }} - {{ account.name }}
</div>

3. 检查组件路由的复用策略（可选）

如果你的组件在路由跳转时不需要销毁重建，可以启用Angular的路由复用策略，但一般不推荐——上面的缓存+async管道方案更通用，也符合Angular的最佳实践。

为什么之前的方式不行？ #

• 手动订阅后赋值给普通属性：组件销毁时订阅会被取消，重建后如果没重新订阅，属性就会是空的
• 没有缓存：每次组件重建都重新请求Firestore，而Firestore的Observable是异步的，模板渲染时数据还没到，所以显示为空，只有Firestore变更时才会触发更新

按照上面的方法改完，路由跳转后组件重建时，accounts$会立刻拿到Service缓存的最新数据，模板也会马上渲染出来，不用等Firestore变更或页面刷新啦！

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