Angular 6中如何检测组件是否首次加载并执行对应逻辑？

当然有啦！在Angular 6里，我们有几种简单可靠的方式来判断组件是不是首次加载，轻松实现你要的「首次加载调用指定函数，非首次直接用缓存数据」的需求。我给你整理了几个常用方案，你可以根据自己的场景来选：

方案一：组件实例变量 + ngOnInit 钩子（最直观） #

这是最常用的基础方案，核心思路就是用一个布尔变量标记组件是否已经加载过，结合ngOnInit钩子来做判断——毕竟ngOnInit在组件初始化时只会执行一次。

步骤很简单：

• 在组件类里定义一个标记变量，比如isFirstLoad = true;
• 在ngOnInit里判断这个变量：如果是true，就调用你的目标函数，然后把标记设为false；如果是false，直接用之前存好的旧数据。

代码示例：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 标记是否为首次加载
  isFirstLoad = true;
  // 存储旧数据的变量
  cachedData: any;

  ngOnInit(): void {
    if (this.isFirstLoad) {
      // 首次加载时调用指定函数
      this.fetchTargetData();
      // 标记为已加载过
      this.isFirstLoad = false;
    } else {
      // 非首次加载，直接使用缓存数据
      console.log('使用缓存数据:', this.cachedData);
    }
  }

  fetchTargetData(): void {
    // 这里写你要调用的业务逻辑，比如请求后端接口
    // 模拟异步请求示例
    setTimeout(() => {
      this.cachedData = { id: 1, content: '首次加载获取的新数据' };
      console.log('首次加载，已调用目标函数');
    }, 1000);
  }
}

这个方案适合大多数场景，不管是路由跳转创建新组件实例，还是用*ngIf切换组件显示隐藏（同一个实例复用），都能正常工作。

方案二：路由快照判断（针对路由组件） #

如果你的组件是路由组件（通过路由导航进入的），还可以利用路由的快照信息来判断是否为首次加载。Angular的路由快照里有个navigationId属性，首次导航时它的值是1，之后每次导航都会递增。

代码示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-your-route-component',
  templateUrl: './your-route-component.component.html',
  styleUrls: ['./your-route-component.component.css']
})
export class YourRouteComponent implements OnInit {
  cachedData: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 通过路由快照的navigationId判断是否首次加载
    if (this.route.snapshot.navigationId === 1) {
      this.fetchTargetData();
    } else {
      console.log('使用缓存数据:', this.cachedData);
    }
  }

  fetchTargetData(): void {
    setTimeout(() => {
      this.cachedData = { id: 1, content: '路由组件首次加载获取的数据' };
      console.log('路由组件首次加载，已调用目标函数');
    }, 1000);
  }
}

要注意的是，如果用户刷新页面，navigationId会重置为1，这其实也符合我们对“首次加载”的预期——毕竟刷新后组件是完全重新初始化的。

方案三：RxJS BehaviorSubject（适合跨组件/持久缓存） #

如果你的数据需要在多个组件间共享，或者希望组件销毁后再重建仍能保留缓存，那可以用RxJS的BehaviorSubject来实现。它可以帮我们存储数据，首次订阅时如果没有数据就调用函数获取，之后直接读取缓存。

代码示例：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';

@Component({
  selector: 'app-shared-data-component',
  templateUrl: './shared-data-component.component.html',
  styleUrls: ['./shared-data-component.component.css']
})
export class SharedDataComponent implements OnInit, OnDestroy {
  // 用BehaviorSubject存储数据，初始值为null
  private dataSubject = new BehaviorSubject<any>(null);
  // 对外暴露可观察对象，避免直接修改数据
  data$ = this.dataSubject.asObservable();
  // 存储订阅对象，组件销毁时取消订阅
  private subscription: Subscription = new Subscription();
  cachedData: any;

  ngOnInit(): void {
    this.subscription.add(
      this.data$.subscribe(data => {
        if (!data) {
          // 首次订阅无数据，调用目标函数获取
          this.fetchTargetData();
        } else {
          // 已有缓存数据，直接使用
          this.cachedData = data;
          console.log('使用缓存数据:', this.cachedData);
        }
      })
    );
  }

  fetchTargetData(): void {
    setTimeout(() => {
      const newData = { id: 1, content: '通过BehaviorSubject缓存的数据' };
      // 更新BehaviorSubject的值
      this.dataSubject.next(newData);
      this.cachedData = newData;
      console.log('首次加载，已调用目标函数');
    }, 1000);
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

如果把这个BehaviorSubject放到Angular服务里，还能实现全局的数据缓存，多个组件都能共享这份数据，不用重复调用接口。

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