Angular中如何从一个组件的函数触发另一组件重新拉取数据或重构

以下是两种无需页面重载即可实现需求的实现方案：

方案1：父子组件通过@Output事件通信（适用父子直接调用场景） #

ticket-projects-new作为父组件直接向crupdate-ticket-project-model传递数据，通过事件绑定实现成本最低：

• 第一步：修改crupdate-ticket-project-model组件代码
  首先导入依赖：
  import { Output, EventEmitter } from '@angular/core';
  修改组件类逻辑：

@Output() closeEvent = new EventEmitter<void>();

public close() {
  this.closeEvent.emit();
  // 保留原有弹窗关闭的逻辑，删除重载页面代码
}

• 第二步：在ticket-projects-new组件的模板中绑定监听事件
  将原有子组件调用代码：
  <app-crupdate-ticket-project-model [data]="你的传参变量"></app-crupdate-ticket-project-model>
  修改为：
  <app-crupdate-ticket-project-model [data]="你的传参变量" (closeEvent)="refreshProjectData()"></app-crupdate-ticket-project-model>
• 第三步：在ticket-projects-new组件中封装拉取数据的方法
  将原页面重载后触发的数据请求逻辑封装为refreshProjectData()方法，事件触发时会自动调用该方法刷新数据。

方案2：共享服务实现跨组件通信（适用多组件需要同步更新场景） #

如果permissionProject-manager组件也需要同步更新数据，或组件间无直接父子关联，可通过共享服务实现全局通知：

• 第一步：创建共享服务TicketProjectService

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

@Injectable({ providedIn: 'root' })
export class TicketProjectService {
  private refreshSub = new Subject<void>();
  // 暴露可订阅的刷新信号
  public refresh$ = this.refreshSub.asObservable();

  // 触发全局刷新的方法
  public triggerRefresh(): void {
    this.refreshSub.next();
  }
}

• 第二步：修改crupdate-ticket-project-model组件的close方法

import { TicketProjectService } from '你的服务路径/ticket-project.service';

constructor(private ticketProjectService: TicketProjectService) {}

public close() {
  this.ticketProjectService.triggerRefresh();
  // 保留原有弹窗关闭的逻辑，删除重载页面代码
}

• 第三步：在需要刷新数据的组件中订阅刷新信号
  以ticket-projects-new组件为例，permissionProject-manager组件可按相同逻辑适配：

import { TicketProjectService } from '你的服务路径/ticket-project.service';
import { Subscription } from 'rxjs';

private refreshSub: Subscription;

constructor(private ticketProjectService: TicketProjectService) {}

ngOnInit(): void {
  // 订阅刷新信号，收到信号后执行拉数据逻辑
  this.refreshSub = this.ticketProjectService.refresh$.subscribe(() => {
    this.refreshProjectData();
  });
  // 其他原有初始化逻辑
}

// 组件销毁时取消订阅避免内存泄漏
ngOnDestroy(): void {
  this.refreshSub?.unsubscribe();
}

private refreshProjectData(): void {
  // 你原本的从服务端拉取数据的逻辑
}

仅需要ticket-projects-new刷新数据优先选方案1，多组件需要同步更新选方案2可扩展性更强。

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