Angular两个子组件如何互访数据？搜索与分页组件交互问题

你遇到的问题核心是兄弟组件无法直接通过EventEmitter通信，@Output只能将事件传递给直接父组件，而非兄弟组件。以下是两种可行的实现方式：

方案一：父组件中转（推荐，Angular标准方式） #

通过父组件作为中间层，接收搜索组件的输出值，再通过@Input传递给分页组件。

1. 修改父组件模板 #

假设父组件同时包含两个子组件，模板中绑定搜索组件的事件，并将搜索值传递给分页组件：

<!-- 父组件模板 -->
<app-indication-grid-filter
  (searchItemsEvent)="handleSearchChange($event)"
  [allowEdit]="true"
></app-indication-grid-filter>

<app-indications-grid-tab
  [allowEdit]="true"
  [isActive]="true"
  [currentSearch]="currentSearchValue"
></app-indications-grid-tab>

2. 父组件类实现 #

在父组件中保存搜索值，并实现事件处理方法：

export class ParentComponent {
  currentSearchValue: string = '';

  handleSearchChange(searchVal: string) {
    this.currentSearchValue = searchVal;
  }
}

3. 分页组件添加@Input接收值 #

修改IndicationsGridTabComponent，添加输入属性接收搜索值，并移除jQuery操作DOM的代码：

export class IndicationsGridTabComponent implements OnInit {
  // 新增输入属性接收搜索值
  @Input() currentSearch: string = '';

  // ... 原有代码

  getPage(pageNumber: number) {
    // 直接使用输入的搜索值，删除jQuery相关代码
    this.indicationManager.getIndicationsPageByActivity(
      pageNumber,
      this.isActive,
      this.currentIndicationTypeId,
      (response) => {
        this.itemsCount = response.ItemsCount;
        this.items = response.Indications;
        this.currentPage = pageNumber;
      },
      this.currentSearch // 使用父组件传递的搜索值
    );
  }
}

方案二：共享服务（适合多组件共享状态） #

创建一个全局共享服务，存储搜索值，搜索组件更新值，分页组件订阅值的变化。

1. 创建共享服务 #

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

@Injectable({ providedIn: 'root' })
export class SearchStateService {
  // BehaviorSubject会保存当前值，新订阅者能直接获取最新值
  private searchValue$ = new BehaviorSubject<string>('');
  public currentSearch$ = this.searchValue$.asObservable();

  updateSearchValue(value: string) {
    this.searchValue$.next(value);
  }
}

2. 搜索组件注入服务并更新值 #

修改IndicationGridFilterComponent，用服务替代EventEmitter：

export class IndicationGridFilterComponent {
  constructor(private searchStateService: SearchStateService) {}

  onSearchStringChanged() {
    clearTimeout(this.searchTimeout);
    this.searchTimeout = setTimeout(() => {
      const searchVal = this.searchString.toLowerCase();
      // 通过服务更新搜索值
      this.searchStateService.updateSearchValue(searchVal);
    }, 500);
  }
}

3. 分页组件订阅服务的搜索值 #

修改IndicationsGridTabComponent，订阅服务的搜索值变化：

import { Subscription } from 'rxjs';

export class IndicationsGridTabComponent implements OnInit, OnDestroy {
  private searchSubscription: Subscription;
  currentSearch: string = '';

  constructor(
    @Inject(IndicationManager) private indicationManager: IndicationManager,
    private searchStateService: SearchStateService
  ) {
    this.indicationTypes = this.indicationManager.getIndicationTypes();
  }

  ngOnInit() {
    // 订阅搜索值变化
    this.searchSubscription = this.searchStateService.currentSearch$.subscribe(val => {
      this.currentSearch = val;
      // 可选：搜索值变化时自动刷新第一页
      this.getPage(1);
    });

    // ... 原有初始化代码
  }

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

  getPage(pageNumber: number) {
    this.indicationManager.getIndicationsPageByActivity(
      pageNumber,
      this.isActive,
      this.currentIndicationTypeId,
      (response) => {
        this.itemsCount = response.ItemsCount;
        this.items = response.Indications;
        this.currentPage = pageNumber;
      },
      this.currentSearch
    );
  }
}

为什么你的EventEmitter没生效？ #

@Output的事件只能传递给直接父组件，无法直接跨兄弟组件通信。你之前的代码没有在父组件中监听searchItemsEvent并将值传递给分页组件，所以分页组件无法获取到搜索值。

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