首先得明确为啥会出现这种情况：Angular里ngOnInit只在组件第一次初始化创建的时候执行，如果组件被缓存、或者路由参数变化但组件没重建，再回来时ngOnInit就不会再跑，加上组件销毁后变量会被重置，就会出现statistics变成undefined的情况。下面给你几种常见场景的解决办法：

1. 组件被路由复用策略缓存了 #

如果你的项目自定义了RouteReuseStrategy（或者用了带路由缓存的第三方库），组件会被缓存起来，再次导航回来时不会重新创建，自然ngOnInit不会触发。

解决办法： #

• 如果不需要缓存这个组件，修改自定义的RouteReuseStrategy，把该组件的路由排除在缓存列表外；
• 或者监听路由激活事件，每次组件被激活时重新加载数据：

import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

export class YourComponent implements OnInit, OnDestroy {
  public statistics: Statistic[];
  // 用于销毁订阅，防止内存泄漏
  private destroy$ = new Subject<void>();

  constructor(
    public statisticService: StatisticService,
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    // 监听路由完成事件，确保每次进入组件都加载数据
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      // 过滤掉子路由的情况，只处理当前组件激活
      filter(() => this.route.firstChild === null),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.loadStatistics();
    });

    // 第一次加载数据
    this.loadStatistics();
  }

  // 把数据加载逻辑抽成单独方法，方便复用
  private loadStatistics() {
    this.statisticService.getStatistics().subscribe(
      statistics => {
        this.statistics = statistics;
        console.log('数据加载完成');
      },
      error => {
        console.error('加载统计数据失败:', error);
        // 给个默认值避免模板报错
        this.statistics = [];
      }
    );
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

2. 路由参数变化但组件未重建 #

如果你的组件是带参数的路由（比如/stats/:category），当路由参数变化时，Angular不会销毁重建组件，ngOnInit只会执行一次，这时候数据就不会更新。

解决办法： #

订阅ActivatedRoute的参数变化事件，参数变了就重新加载数据：

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

export class YourComponent implements OnInit, OnDestroy {
  public statistics: Statistic[];
  private destroy$ = new Subject<void>();

  constructor(
    public statisticService: StatisticService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    // 监听路由参数变化，每次参数更新就重新加载数据
    this.route.paramMap.pipe(
      takeUntil(this.destroy$)
    ).subscribe(() => {
      // 如果数据依赖路由参数，可以在这里获取参数
      // const category = this.route.snapshot.paramMap.get('category');
      this.loadStatistics();
    });
  }

  private loadStatistics() {
    this.statisticService.getStatistics().subscribe(
      statistics => {
        this.statistics = statistics;
      },
      error => {
        console.error('加载失败:', error);
        this.statistics = [];
      }
    );
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 组件销毁后数据未重新加载（排查错误） #

如果导航到其他页面时组件被销毁，回来时应该重新创建组件，ngOnInit肯定会触发。如果这时候没触发，大概率是代码有错误：

排查&解决： #

• 给getStatistics()的订阅加上错误处理，看看是不是请求失败了：

  this.statisticService.getStatistics().subscribe(
    statistics => this.statistics = statistics,
    error => {
      console.error('请求错误:', error);
      this.statistics = [];
    }
  );
  

• 检查浏览器控制台有没有报错，比如服务注入错误、路由守卫阻止组件初始化等；
• 确认路由配置里没有特殊设置（比如canActivate守卫返回false）。

4. 在服务中缓存数据（更优雅的方案） #

可以把数据缓存到StatisticService里，这样即使组件销毁重建，回来时能直接拿到缓存数据，同时可以选择是否重新请求最新数据：

先修改服务： #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class StatisticService {
  // 用BehaviorSubject缓存数据，初始值为空数组
  private statisticsCache = new BehaviorSubject<Statistic[]>([]);
  // 对外暴露可观察对象，避免直接修改缓存
  public statistics$ = this.statisticsCache.asObservable();

  constructor(private http: HttpClient) { }

  getStatistics(): Observable<Statistic[]> {
    return this.http.get<Statistic[]>('/api/statistics').pipe(
      // 请求成功后更新缓存
      tap(statistics => this.statisticsCache.next(statistics))
    );
  }

  // 获取当前缓存的数据
  getCachedStatistics(): Statistic[] {
    return this.statisticsCache.value;
  }
}

然后在组件里使用： #

ngOnInit() {
  // 先拿缓存的数据，避免页面空白
  const cachedData = this.statisticService.getCachedStatistics();
  if (cachedData.length > 0) {
    this.statistics = cachedData;
  }
  // 同时发起请求更新最新数据
  this.statisticService.getStatistics().subscribe(statistics => {
    this.statistics = statistics;
  });
}

这样不管组件怎么销毁重建，都能快速显示缓存数据，同时同步最新数据。

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