如何从Angular组件A触发组件B的ngOnInit方法？

先排查基础问题 #

首先确认组件B是否在页面中正常渲染：如果组件B带有*ngIf等条件渲染指令，需确保条件为真，否则ngOnInit不会执行，自然不会触发加载逻辑。

方案一：通过共享服务实现事件通知 #

创建一个全局共享服务，组件A完成核心加载逻辑后发布事件，组件B订阅该事件触发自身加载。

1. 创建共享事件服务

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

@Injectable({ providedIn: 'root' })
export class ComponentSyncService {
  private componentALoaded$ = new Subject<void>();

  // 组件A调用此方法发布加载完成事件
  notifyComponentALoaded() {
    this.componentALoaded$.next();
  }

  // 组件B订阅此Observable获取加载信号
  getComponentALoadedSignal() {
    return this.componentALoaded$.asObservable();
  }
}

2. 修改组件A：完成加载后发布事件

// 注入共享服务
constructor(private componentSyncService: ComponentSyncService) {}

ngOnInit(): void {
    this.route.queryParams
      .pipe(
        first(),
        tap(params => this.params = params?.filters ? JSON.parse(params.filters) : {}),
        switchMap(() =>
          this.http
            .get(
              this.configPrv.AppSetting.uriReports.getReportsDashboardConfig,
              { withCredentials: true }
            )
            .pipe(
              tap((response: { fields: FieldsDefinition<Form>; dimensions?: string }) => {
                this.form = this.formGenerator.init(
                  {
                    layout: {
                      'grid-template-columns': '1fr 1fr 1fr 1fr',
                      'column-gap': '1.5em',
                    },
                    fields: response.fields,
                  },
                  this.params
                );
                // 组件A核心加载完成，通知组件B
                this.componentSyncService.notifyComponentALoaded();
              }),
              switchMap(() =>
                this.form.values$.pipe(
                  tap(values => this.reportEndpoint = values?.report || ''),
                  tap(filters =>
                    this.router.navigate(['./'], {
                      relativeTo: this.route,
                      queryParams: Object.keys(filters).length !== 0
                        ? { filters: JSON.stringify(filters) }
                        : {},
                    })
                  )
                )
              )
            )
        ),
        takeUntil(this._onDestroySubject)
      )
      .subscribe();
  }

3. 修改组件B：订阅事件触发加载

// 注入共享服务
constructor(private componentSyncService: ComponentSyncService) {}

ngOnInit(): void {
    // 订阅组件A的加载完成信号
    this.componentSyncService.getComponentALoadedSignal()
      .pipe(takeUntil(this._onDestroySubject)) // 避免内存泄漏
      .subscribe(() => {
        this.loadComponentBData();
      });
}

// 封装组件B的加载逻辑
private loadComponentBData() {
    this.http
      .get<ReportBuilderReportConfig>(
        this.configPrv.AppSetting.uriReports.getReportsDashboardConfig,
        { withCredentials: true }
      )
      .pipe(tap(response => {
        // 这里处理组件B的响应数据，比如赋值给组件变量
        // this.bComponentData = response;
      }))
      .subscribe(resp => {
        // 后续业务逻辑
      });
}

方案二：通过父子组件事件传递（适用于同属父组件场景） #

如果组件A和组件B在同一个父组件下，可通过组件A的输出事件通知父组件，再由父组件直接调用组件B的加载方法。

1. 组件A添加输出事件

import { Output, EventEmitter } from '@angular/core';

@Component({ ... })
export class ComponentAComponent {
  @Output() loaded = new EventEmitter<void>();

  ngOnInit(): void {
    this.route.queryParams
      .pipe(
        // ...原有逻辑
        tap((response: { fields: FieldsDefinition<Form>; dimensions?: string }) => {
          this.form = this.formGenerator.init(...);
          // 触发加载完成事件
          this.loaded.emit();
        }),
        // ...原有逻辑
      )
      .subscribe();
  }
}

2. 父组件模板绑定事件并引用组件B

<app-component-a (loaded)="triggerComponentBLoad()"></app-component-a>
<app-component-b #componentBRef></app-component-b>

3. 父组件调用组件B的加载方法

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

@Component({ ... })
export class ParentComponent {
  @ViewChild('componentBRef') componentB!: ComponentBComponent;

  triggerComponentBLoad() {
    this.componentB.loadComponentBData(); // 调用组件B封装的加载方法
  }
}

方案三：同步路由参数监听（适用于依赖同一路由参数场景） #

如果组件B的加载依赖组件A处理的路由参数，可让组件B和组件A同步监听路由参数变化，触发加载逻辑：

// 组件B的ngOnInit修改为
ngOnInit(): void {
    this.route.queryParams
      .pipe(
        first(),
        switchMap(() => 
          this.http.get<ReportBuilderReportConfig>(
            this.configPrv.AppSetting.uriReports.getReportsDashboardConfig,
            { withCredentials: true }
          )
        ),
        takeUntil(this._onDestroySubject)
      )
      .subscribe(resp => {
        // 处理组件B的响应数据
      });
}

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