如何在根组件(AppComponent)请求API并向路由组件传递数据？

你的思路完全合理——在根组件一次性加载全局共享的数据，再分发给各个路由子组件，确实能避免重复发起HTTP请求，提升用户体验。下面是具体的实现步骤，帮你搞定这个需求：

1. 创建一个共享数据服务 #

首先需要一个单例服务来存储和分发数据，推荐用BehaviorSubject，因为它会保存当前的最新值，新订阅的组件能立即拿到已有数据，不用等待新的事件发射。

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
// 替换成你实际的数据类型
import { YourDataType } from './models/your-data-type.model';

@Injectable({ providedIn: 'root' })
export class SharedDataService {
  private dataSubject = new BehaviorSubject<YourDataType | null>(null);
  // 对外暴露只读的Observable，避免外部直接修改数据
  public data$: Observable<YourDataType | null> = this.dataSubject.asObservable();

  // 更新数据的方法
  setData(data: YourDataType): void {
    this.dataSubject.next(data);
  }

  // 同步获取当前数据（可选，用于判断数据是否已加载）
  getCurrentData(): YourDataType | null {
    return this.dataSubject.value;
  }
}

2. 在AppComponent中加载数据 #

在根组件的ngOnInit钩子中调用API，把获取到的数据存入共享服务，同时可以加个判断，避免页面刷新后重复加载：

import { Component, OnInit } from '@angular/core';
import { SharedDataService } from './services/shared-data.service';
// 你的API请求服务
import { ApiService } from './services/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private apiService: ApiService,
    private sharedDataService: SharedDataService
  ) {}

  ngOnInit(): void {
    // 检查是否已有数据，避免重复发起请求
    if (!this.sharedDataService.getCurrentData()) {
      this.apiService.fetchTargetData().subscribe({
        next: (data) => {
          this.sharedDataService.setData(data);
        },
        error: (err) => {
          console.error('数据加载失败:', err);
          // 这里可以添加错误提示逻辑，比如给用户显示弹窗
        }
      });
    }
  }
}

3. 在子组件中订阅并使用数据 #

在需要展示数据的子组件中，订阅共享服务的data$ Observable，拿到数据后进行渲染：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedDataService } from '../services/shared-data.service';
import { Subscription } from 'rxjs';
import { YourDataType } from '../models/your-data-type.model';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css']
})
export class ChildComponent implements OnInit, OnDestroy {
  data: YourDataType | null = null;
  private dataSubscription!: Subscription;

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit(): void {
    this.dataSubscription = this.sharedDataService.data$.subscribe({
      next: (data) => {
        this.data = data;
        // 数据更新后的额外逻辑，比如初始化组件状态
      }
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅，避免内存泄漏
    this.dataSubscription.unsubscribe();
  }
}

4. 可选：处理数据加载状态 #

如果数据加载需要一定时间，你可以在共享服务中添加加载状态的Subject，让子组件能显示加载中提示：

// 在SharedDataService中新增状态管理
private loadingSubject = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();

setLoading(isLoading: boolean): void {
  this.loadingSubject.next(isLoading);
}

然后在AppComponent加载数据时更新状态：

ngOnInit(): void {
  if (!this.sharedDataService.getCurrentData()) {
    this.sharedDataService.setLoading(true);
    this.apiService.fetchTargetData().subscribe({
      next: (data) => {
        this.sharedDataService.setData(data);
        this.sharedDataService.setLoading(false);
      },
      error: (err) => {
        console.error('数据加载失败:', err);
        this.sharedDataService.setLoading(false);
      }
    });
  }
}

子组件模板中就可以这样使用：

<div *ngIf="loading$ | async; else content">
  数据加载中，请稍候...
</div>
<ng-template #content>
  <div *ngIf="data">
    <!-- 这里渲染你的数据 -->
    <h3>{{ data.title }}</h3>
    <p>{{ data.description }}</p>
  </div>
</ng-template>

补充说明 #

如果你的数据是某个特定路由专属的，也可以考虑用Angular的Resolve路由守卫在路由激活前预加载数据，但你的场景是多个子组件共享数据，根组件加载的方式显然更合适。

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