Angular 17组件间传递API响应失败：始终返回Null问题排查

问题场景 #

在Angular 17项目里，通过基于BehaviorSubject的ResponseService共享API响应数据：第一个组件调用API后将数据存入服务，随后路由跳转到第二个组件，但第二个组件始终获取到null值。

共享服务代码 (response.service.ts) #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ResponseService {
  private responseDataSubject = new BehaviorSubject<any>(null);
  responseData$ = this.responseDataSubject.asObservable();

  constructor() { }

  setResponseData(data: any) {
    console.log('Response data set:', data);
    this.responseDataSubject.next(data);
  }
}

第一个组件请求API并跳转的代码 #

this.http.post<any>('url link', requestBody)
      .subscribe({
        next: response => {
          console.log(response);
          this.loader.stop();
          // 把响应存入共享服务
          this.responseService.setResponseData(response);
          
          // 跳转到MyprojectsComponent
          this.router.navigate(['/myprojects']);
        },
        error: error => {
          console.error('Error occurred:', error);
        }
      });

第二个组件订阅数据的代码 #

constructor(private router: Router, public responseService: ResponseService, private route: ActivatedRoute) { }

ngOnInit(): void {
    this.responseService.responseData$.subscribe({
      next: (response) => {
        if (response !== null) {
          console.log('从ScribblePadComponent获取的响应:', response);
          // 处理响应数据
        } else {
          console.error('从ScribblePadComponent获取的响应是null.');
        }
      },
      error: (error) => {
        console.error('获取ScribblePadComponent响应时出错:', error);
      }
    });
    this.fetchData(); // 初始数据获取
}

第二个组件HTML代码（部分） #

<div class="item pos-rel mob-style" *ngFor="let item of row.items">
  <div class="content-wrapper general-box-shadow" style="flex-wrap: wrap;">
    <div class="col-md-8">
      <div class="content">
        <div class="circle-container">
          <div class="number-circle">{{ item.id }}</div>
        </div>
        <div style="padding: 10px 74px;" class="list-cards">
          <p style="font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p>
          <p *ngIf="item.collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <span (click)="toggleDescription(item)" class="f-16" title="Expand/Collapse">
            <i class="fas fa-chevron-down" [class.rot180]="item.collapsed"></i>
          </span>
          <span class="f-16" title="Related Movies"><i class="fas fa-film"></i></span>
          <span class="f-16" title="Edit"><i class="fas fa-pen"></i></span>
        </div>
      </div>
    </div>
</div>

API响应示例 #

{
    "logline_1": [
        "A street fighter battles for survival in the underground world of dog fights. When he refuses to kill a defeated opponent, he becomes the next target. Now, he must outsmart the syndicate to save his own life.",
        "Jake, a seasoned street fighter, dominates the gritty underground scene of dog fights. His moral compass is tested when he's ordered to kill a defeated rival, but he refuses. The syndicate running the fights marks him for death, thrusting him into a deadly game of cat and mouse. With the help of a former opponent turned ally, Jake devises a plan to dismantle the syndicate from within. As the final showdown looms, Jake's skills are put to the ultimate test. Will he survive the fight of his life, or will the syndicate claim another victim?",
        "Fight Club"
    ],
    "logline_2": [
        "An undercover cop infiltrates a brutal street fighting ring. Her mission turns deadly when she's ordered to fight to the death. She must expose the corrupt officials before her identity is revealed.",
        "Detective Sarah Connors goes deep undercover to bring down a notorious street fighting ring. She earns the trust of the organizers, but her cover is jeopardized when she's forced into a kill-or-be-killed match. Sarah's moral dilemma intensifies as she faces an innocent opponent in the ring. Time is running out as she scrambles to gather evidence against the corrupt officials behind the fights. With her identity on the brink of exposure, Sarah must make a life-changing decision. Can she maintain her cover and serve justice, or will the brutal world she's infiltrated consume her?",
        "Warrior"
    ]
}

排查与解决方法 #

1. 确认路由跳转未触发页面刷新 #

虽然服务是providedIn: 'root'单例，但如果路由跳转时触发了页面刷新（比如手动刷新、路由配置错误），会导致BehaviorSubject重置为初始null值：

• 观察浏览器地址栏变化，跳转时是否有页面闪烁；
• 检查路由模块配置，避免因pathMatch: 'full'等规则导致意外的页面重载。

2. 调整订阅逻辑确保获取有效数据 #

第二个组件在ngOnInit订阅时，若BehaviorSubject的next事件已触发完毕，新订阅只会拿到当前的最新值（初始null）。可以通过RxJS操作符过滤并确保拿到有效数据：

import { filter, take } from 'rxjs';

// 第二个组件ngOnInit中修改订阅逻辑
this.responseService.responseData$
  .pipe(
    filter(data => data !== null),
    take(1)
  )
  .subscribe({
    next: (response) => {
      console.log('从ScribblePadComponent获取的响应:', response);
      // 处理数据逻辑
    },
    error: (error) => {
      console.error('获取响应时出错:', error);
    }
  });

3. 替换为ReplaySubject缓存最新值 #

如果希望新订阅能直接拿到之前发送过的最新值，而非初始null，可以用ReplaySubject(1)替代BehaviorSubject，它会缓存最后一次发送的值：

// 修改ResponseService的Subject定义
private responseDataSubject = new ReplaySubject<any>(1);

4. 验证数据是否正确存入服务 #

在服务的setResponseData方法中添加打印，确认数据已正确发送：

setResponseData(data: any) {
  console.log('Response data set:', data);
  this.responseDataSubject.next(data);
  // 打印当前Subject值确认
  console.log('当前Subject值:', this.responseDataSubject.value);
}

5. 清理订阅避免内存泄漏 #

第二个组件需在销毁时取消订阅，防止内存泄漏：

import { Subscription } from 'rxjs';

private dataSub!: Subscription;

ngOnInit(): void {
  this.dataSub = this.responseService.responseData$.subscribe(...);
}

ngOnDestroy(): void {
  this.dataSub.unsubscribe();
}

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