Angular路由场景下兄弟组件双向绑定如何实现跨组件传值

当前代码存在5个直接导致功能不生效的问题，按如下步骤修改即可正常运行：

核心问题点 #

• ComponentOne中输入框值变化后，从未调用服务的updateData方法推送新值，服务根本拿不到输入框的最新数据
• ComponentTwo中定义的subscribeToData方法从未被执行，就算服务推送了数据，组件也不会接收
• 使用普通Subject做数据通信，该类型不会缓存历史值，晚于数据推送时机初始化的组件（比如路由加载的ComponentTwo/Three）拿不到订阅前发出的值
• 构造函数中初始化Firebase请求时直接使用未定义的model_string变量，且后续model_data更新后不会自动重新发起数据查询
• DataService缺少@Injectable装饰器，无法被正确注入为全局单例服务

分步修复代码 #

1. 重写共享DataService #

将普通Subject替换为BehaviorSubject缓存最新值，保证任何时机订阅的组件都能拿到当前数据，同时限制外部直接修改数据流：

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

// 全局单例注入，不需要在模块providers重复声明
@Injectable({ providedIn: 'root' })
export class DataService {
  // 直接传入初始值，不需要额外声明未定义的model_string变量
  private readonly dataSubject = new BehaviorSubject<string>('model_string');
  // 对外只暴露只读可观察流
  public readonly data$ = this.dataSubject.asObservable();

  updateData(data: string): void {
    this.dataSubject.next(data);
  }
}

注意：不要在任何组件的providers数组中重复声明DataService，否则会生成独立服务实例，导致数据不通。

2. 修改ComponentOne #

补全输入框值变化的触发逻辑，保证输入内容实时同步到服务：

• ts文件代码：

import { Component, OnInit } from '@angular/core';
import { DataService } from '你的服务相对路径/data.service';

@Component({
  selector: 'app-component-one',
  templateUrl: './component-one.component.html'
})
export class ComponentOne implements OnInit {
  model_data = 'model_string';

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // 初始化时同步一次默认值
    this.dataService.updateData(this.model_data);
  }

  // 输入框值变化时自动同步到服务
  onValueChange(): void {
    this.dataService.updateData(this.model_data);
  }
}

• 模板文件代码，给输入框加值变化事件：

<input class="negligible" [(ngModel)]="model_data" (ngModelChange)="onValueChange()">

记得在所属模块导入FormsModule，否则ngModel指令不生效。

3. 修改ComponentTwo #

取消构造函数中写死的Firebase初始化逻辑，改为订阅数据流，每次model_data更新时自动重新查询Firebase数据，同时补上组件销毁时的订阅取消逻辑，避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Title, Meta } from '@angular/platform-browser';
import { DataService } from '你的服务相对路径/data.service';
import { Observable, Subject, map, switchMap, takeUntil } from 'rxjs';

@Component({
  selector: 'app-component-two',
  templateUrl: './component-two.component.html'
})
export class ComponentTwo implements OnInit, OnDestroy {
  title = 'First';
  items$: Observable<any[]>;
  private readonly destroy$ = new Subject<void>();

  constructor(
    private db: AngularFireDatabase,
    private titleService: Title,
    private meta: Meta,
    private dataService: DataService
  ) {}

  ngOnInit(): void {
    this.titleService.setTitle(this.title);
    this.meta.addTag({ name: 'Negligible', content: 'Negligible' });

    // 每次服务推送新的model_data，自动重新查询Firebase列表
    this.items$ = this.dataService.data$.pipe(
      takeUntil(this.destroy$),
      switchMap(currentData => this.db.list(currentData, ref => ref.limitToLast(100))
        .valueChanges()
        .pipe(map(values => values.reverse()))
      )
    );
  }

  ngOnDestroy(): void {
    // 组件销毁时终止所有订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

• ComponentTwo模板中直接用async管道消费数据流即可，不需要手动管理订阅：

<ng-container *ngFor="let item of items$ | async">
  <!-- 这里写你的列表项渲染逻辑 -->
</ng-container>

其他组件适配 #

ComponentThree如果需要用到model_data，参考ComponentTwo的逻辑，直接订阅this.dataService.data$即可拿到实时更新的值。

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