Angular 14无需HTTP请求实现跨组件数据绑定的方法

问题分析 #

点击房屋列表项后，HousesTemplateComponent需展示对应房屋数据，路由参数可正常获取，但页面绑定房屋名称时显示undefined。核心问题在于HouseService中的getHouseById方法仅返回了Subject的Observable，但未从本地housesArray中查找数据并发射，导致组件订阅后无法获取有效数据。

修复方案 #

1. 修改HouseService #

移除无用的Subject，直接从本地数组查询数据并返回Observable：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Houses } from './houses.interface';
import { housesArray } from './houses.data';

@Injectable({
  providedIn: 'root'
})
export class HouseService {
  getHouseById(id: number): Observable<Houses | undefined> {
    // 匹配id（注意转换参数类型，路由参数默认是字符串）
    const targetHouse = housesArray.find(house => house.id === +id);
    // 用of将同步数据包装为Observable返回
    return of(targetHouse);
  }
}

2. 优化组件订阅逻辑 #

使用switchMap替代嵌套订阅，避免内存泄漏并简化代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { HouseService } from '../house.service';
import { Houses } from '../houses.interface';

@Component({
  selector: 'app-houses-template',
  templateUrl: './houses-template.component.html',
  styleUrls: ['./houses-template.component.css']
})
export class HousesTemplateComponent implements OnInit {
  house: Houses | undefined;

  constructor(
    private route: ActivatedRoute,
    private houseService: HouseService
  ) { }

  ngOnInit(): void {
    this.route.params.pipe(
      switchMap(params => this.houseService.getHouseById(params['id']))
    ).subscribe(house => {
      this.house = house;
    });
  }
}

关键说明 #

• 原服务中的Subject未发射任何数据，组件订阅后自然无法获取值，导致this.house为undefined；修改后直接从本地数组查询并返回数据，确保订阅能拿到有效结果。
• 使用switchMap可在路由参数变化时自动取消之前的订阅，避免多个订阅同时存在引发的内存泄漏问题，同时让代码结构更清晰。

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