Angular 5中能否用Subject或Behavior Subject实现跨路由组件通信？

当然可以！这其实是Angular中非父子组件通信非常常用的一种方案，尤其是你这种涉及路由跳转的场景，用RxJS的BehaviorSubject会比普通Subject更合适——因为它会保存最新的发射值，跳转后的组件订阅时能直接拿到这个最新数据，不会错过消息。我来给你一步步拆解怎么实现你的ListComponent和DetailComponent的需求：

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

首先需要一个单例的共享服务，用来承载BehaviorSubject作为消息总线。这个服务要确保在整个应用中只有一个实例，在Angular 5里可以用@Injectable({ providedIn: 'root' })来实现（或者在根模块的providers数组中声明）。

// data-sharing.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
// 替换成你实际的数据类型定义
import { FormDataModel } from './form-data.model'; 

@Injectable({
  providedIn: 'root' // 确保服务是单例
})
export class DataSharingService {
  // 初始化BehaviorSubject，初始值设为null
  private savedDataSubject = new BehaviorSubject<FormDataModel | null>(null);
  // 暴露可观察对象，让组件只能订阅，不能直接修改数据源
  public savedData$ = this.savedDataSubject.asObservable();

  constructor() { }

  // 提供方法更新共享数据
  setSavedData(data: FormDataModel) {
    this.savedDataSubject.next(data);
  }
}

2. 在ListComponent中发送数据并跳转路由 #

当你在ListComponent中完成表单保存逻辑后，调用共享服务的setSavedData()方法传递数据，再通过路由跳转到DetailComponent。

// list.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { DataSharingService } from '../data-sharing.service';
import { FormDataModel } from '../form-data.model';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html'
})
export class ListComponent {
  constructor(
    private dataService: DataSharingService,
    private router: Router
  ) { }

  onFormSubmit(formData: FormDataModel) {
    // 这里先执行你的数据保存逻辑（比如调用API）
    console.log('数据已保存:', formData);
    
    // 将保存好的数据传入共享服务
    this.dataService.setSavedData(formData);
    // 路由跳转到详情页
    this.router.navigate(['/detail']);
  }
}

3. 在DetailComponent中订阅数据并展示 #

在DetailComponent中，注入共享服务并订阅savedData$，拿到数据后填充到编辑表单里。推荐用async管道，它会自动处理订阅和销毁，避免内存泄漏。

方式一：使用async管道（推荐） #

在模板中直接通过async管道订阅并获取数据：

<!-- detail.component.html -->
<form *ngIf="savedData$ | async as formData">
  <label>名称：</label>
  <input type="text" [(ngModel)]="formData.name" name="name">
  
  <label>描述：</label>
  <textarea [(ngModel)]="formData.description" name="description"></textarea>
  
  <!-- 其他表单字段 -->
</form>

对应的组件代码：

// detail.component.ts
import { Component } from '@angular/core';
import { DataSharingService } from '../data-sharing.service';
import { Observable } from 'rxjs/Observable';
import { FormDataModel } from '../form-data.model';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html'
})
export class DetailComponent {
  savedData$: Observable<FormDataModel | null>;

  constructor(private dataService: DataSharingService) {
    // 获取共享数据的可观察对象
    this.savedData$ = this.dataService.savedData$;
  }
}

方式二：手动订阅并销毁 #

如果需要在组件类中对数据做额外处理，可以手动订阅，记得在组件销毁时取消订阅：

// detail.component.ts
import { Component, OnDestroy } from '@angular/core';
import { DataSharingService } from '../data-sharing.service';
import { Subscription } from 'rxjs/Subscription';
import { FormDataModel } from '../form-data.model';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html'
})
export class DetailComponent implements OnDestroy {
  currentFormData: FormDataModel | null = null;
  private dataSubscription: Subscription | undefined;

  constructor(private dataService: DataSharingService) {
    this.dataSubscription = this.dataService.savedData$.subscribe(data => {
      if (data) {
        this.currentFormData = {...data}; // 深拷贝避免原数据被修改
        // 这里可以做数据预处理逻辑
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
  }
}

关键细节说明 #

• 为什么选BehaviorSubject？因为普通Subject只会发送订阅之后的新值，而你的场景是先发送数据再跳转路由，DetailComponent是后续才初始化订阅的，用BehaviorSubject能确保新订阅立即拿到最新的保存数据，完美适配你的需求。
• 确保服务单例：如果服务被多次声明在不同模块的providers中，会生成多个实例，导致组件无法共享数据，用providedIn: 'root'是最稳妥的方式。
• 数据类型：定义明确的模型类（比如FormDataModel），避免使用any，让代码更易维护和健壮。

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