Angular兄弟组件方法调用：deals-transaction变更触发deals-approval方法咨询

方案1：通过@ViewChild直接调用子组件方法（推荐，适配当前场景） #

这种方案实现成本最低，因为app-deals-approval是deals-transaction的直接子组件，父组件可以直接拿到子组件实例调用对应方法。

步骤1：添加子组件引用 #

在deals-transaction.component.ts中导入目标组件，通过@ViewChild获取子组件实例：

// 导入依赖
import { DealsApprovalComponent } from './deals-approval.component';

export class DealsTransactionComponent implements OnInit {
  // 新增：获取app-deals-approval子组件实例
  @ViewChild(DealsApprovalComponent, { static: false }) dealsApprovalComp: DealsApprovalComponent;

  // 原有代码保持不变...
}

步骤2：开放子组件调用入口 #

因为当前_pageEventDealsForApprovalList是私有方法，外部无法直接调用，需要调整deals-approval.component.ts的代码：

// 方案A：直接修改方法修饰符为public
public _pageEventDealsForApprovalList() {
  // 原有逻辑保持不变
}

// 方案B：封装公开触发方法（更规范，不暴露内部实现）
public triggerRefresh() {
  if (this.table) {
    this._pageEventDealsForApprovalList();
  }
}

步骤3：触发方法调用 #

在deals-transaction.component.ts的_pageEventDealsList方法中，按需调用子组件的刷新方法，比如等deal列表加载完成后再触发审批列表刷新：

public _pageEventDealsList() {
  this.searchInput = '';
  this.isLoading = true;
  this.dealService
    .getAllDeals(
      this.accountId,
      this.transaction.id,
      this.table.pageIndex + 1,
      this.table.pageSize,
      this.searchInput,
      this.table.sortParams,
      this.table.sortDirs
    )
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe({
      error: (err) => this.notificationService.showError(err),
      next: (res) => {
        this.table.totalItemCount = res.totalItemCount;
        this.table.lastItemOnPage = res.lastItemOnPage;
        this.totalDeals = res.items.length;
        this.table.data = res.items;

        // 新增：调用审批列表刷新，注意判空避免组件未渲染报错
        if(this.dealsApprovalComp) {
          // 用方案A则调用该方法
          // this.dealsApprovalComp._pageEventDealsForApprovalList();
          // 用方案B则调用该方法
          this.dealsApprovalComp.triggerRefresh();
        }
      },
      complete: noop,
    });
}

如果不需要等deal接口返回，只要触发_pageEventDealsList就同步刷新审批列表，直接把调用逻辑放在方法开头即可。

方案2：通过可观察对象传递事件（更解耦，适合高复用场景） #

如果后续有组件拆分需求，希望两个组件减少耦合，可以用可观察对象传递事件：

步骤1：父组件定义事件触发器 #

在deals-transaction.component.ts中新增通知用的可观察对象：

import { Subject, takeUntil } from 'rxjs';

export class DealsTransactionComponent implements OnInit, OnDestroy {
  private refreshApprovalSub = new Subject<void>();
  public refreshApproval$ = this.refreshApprovalSub.asObservable();
  private destroy$ = new Subject<void>();

  // 原有代码不变...

  public _pageEventDealsList() {
    // 发送刷新通知
    this.refreshApprovalSub.next();
    // 原有逻辑不变...
  }

  ngOnDestroy() {
    this.refreshApprovalSub.complete();
    this.destroy$.next();
    this.destroy$.complete();
  }
}

步骤2：模板中传递触发器 #

修改deals-transaction的模板，把可观察对象作为输入传给子组件：

<app-deals-approval 
  [transaction]="transaction" 
  [dataTest]="totalDeals"
  [refreshTrigger]="refreshApproval$"
></app-deals-approval>

步骤3：子组件订阅事件 #

在deals-approval.component.ts中接收触发器，订阅事件触发刷新：

import { Observable, takeUntil } from 'rxjs';

export class DealsApprovalComponent implements OnInit, OnDestroy {
  @Input() refreshTrigger: Observable<void>;
  private _destroyed$ = new Subject();

  ngOnInit(): void {
    // 订阅刷新事件
    this.refreshTrigger?.pipe(takeUntil(this._destroyed$))
      .subscribe(() => {
        if(this.table) {
          this._pageEventDealsForApprovalList();
        }
      });
    // 原有逻辑不变...
  }

  ngOnDestroy() {
    this._destroyed$.next();
    this._destroyed$.complete();
  }
  // 原有代码不变...
}

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