Angular 17中如何在A组件触发函数时重新加载B组件？

因为Component A和Component B是位于同一父组件Mat-Tab下的兄弟组件，无法直接在Component A中用ViewChild获取Component B的引用（ViewChild只能获取当前组件模板内的子组件），所以需要通过父组件中转，或者使用共享服务来实现跨组件通信。以下是两种可行方案：

方案一：通过父组件+ViewChild实现 #

1. 父组件中获取Component B的引用并监听A的事件 #

假设父组件是包含MatTabGroup的容器组件，修改父组件模板：

<mat-tab-group>
  <mat-tab label="Tab A">
    <!-- 给Component A绑定输出事件，用于通知父组件状态更新 -->
    <app-component-a #componentTemplateA (activityUpdated)="triggerComponentBRefresh()"></app-component-a>
  </mat-tab>
  <mat-tab label="Tab B">
    <!-- 给Component B添加模板引用 -->
    <app-component-b #componentTemplateB></app-component-b>
  </mat-tab>
</mat-tab-group>

父组件TS文件中，通过ViewChild获取Component B的实例，并实现触发刷新的方法：

import { Component, ViewChild } from '@angular/core';
import { ComponentBComponent } from './component-b.component';

@Component({
  selector: 'app-tab-container',
  templateUrl: './tab-container.component.html',
})
export class TabContainerComponent {
  // 通过模板引用获取Component B实例
  @ViewChild('componentTemplateB') componentB!: ComponentBComponent;

  triggerComponentBRefresh() {
    // 调用Component B的公开刷新方法
    this.componentB.reloadData();
  }
}

2. Component A中添加输出事件通知父组件 #

修改Component A的TS文件，添加@Output事件，在activityClicked成功后触发：

import { Component, Output, EventEmitter } from '@angular/core';
// 其他必要导入...

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
})
export class ComponentAComponent {
  // 定义输出事件
  @Output() activityUpdated = new EventEmitter<void>();

  // 你的原有代码...

  activityClicked(event: MatCheckboxChange, activity: ActivityDTO) {
    this.activityService
      .changeStatusActivityByCompany(
        this.currentUser.FK_Company,
        activity.ID,
        event.checked
      )
      .subscribe({
        next: (res) => {
          this.getActivitiesByCompany();
          // 触发事件通知父组件
          this.activityUpdated.emit();
        },
        error: (err) => {
          DialogService.Error(err.message);
        },
      });
  }
}

3. Component B中实现公开的刷新方法 #

在Component B中添加一个公开方法，用于重新加载数据：

import { Component } from '@angular/core';
// 其他必要导入...

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
})
export class ComponentBComponent {
  // 你的原有代码...

  // 公开的刷新方法，供父组件调用
  reloadData() {
    // 这里执行Component B的重新加载逻辑，比如调用获取数据的方法
    this.getFilteredActivities(); // 替换为你实际的加载数据方法
  }
}

方案二：使用共享服务实现跨组件通信 #

如果组件层级复杂，或者需要多个组件监听状态变化，推荐使用RxJS共享服务：

1. 创建共享服务 #

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

@Injectable({ providedIn: 'root' })
export class ActivityStateService {
  // 创建Subject用于发送更新通知
  private activityUpdated$ = new Subject<void>();
  // 对外暴露可观察对象
  public activityChanged$ = this.activityUpdated$.asObservable();

  // 发送更新通知的方法
  notifyActivityUpdated() {
    this.activityUpdated$.next();
  }
}

2. Component A中调用服务发送通知 #

import { ActivityStateService } from './activity-state.service';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
})
export class ComponentAComponent {
  constructor(
    private activityService: ActivityService,
    private activityStateService: ActivityStateService
  ) {}

  activityClicked(event: MatCheckboxChange, activity: ActivityDTO) {
    this.activityService
      .changeStatusActivityByCompany(
        this.currentUser.FK_Company,
        activity.ID,
        event.checked
      )
      .subscribe({
        next: (res) => {
          this.getActivitiesByCompany();
          // 发送更新通知
          this.activityStateService.notifyActivityUpdated();
        },
        error: (err) => {
          DialogService.Error(err.message);
        },
      });
  }
}

3. Component B中订阅通知并刷新 #

import { ActivityStateService } from './activity-state.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
})
export class ComponentBComponent {
  private subscription!: Subscription;

  constructor(private activityStateService: ActivityStateService) {}

  ngOnInit() {
    // 订阅更新通知，触发刷新
    this.subscription = this.activityStateService.activityChanged$.subscribe(() => {
      this.reloadData();
    });
  }

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

  reloadData() {
    this.getFilteredActivities();
  }
}

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