如何从一个组件调用另一个组件的ngOnInit

Question

我有 2 个文件将数据加载到 1 页中。我希望当组件 A 的组件加载到页面上时，组件 B 的内容也能加载。

A 成分。

 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
                  );
                 
                }
              ),
              switchMap(() =>
                this.form.values$.pipe(
                  tap(
                    (values: Form) =>
                      (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();
    
  }

B 成分

 ngOnInit(): void {
    this.http
      .get<ReportBuilderReportConfig>(
        this.configPrv.AppSetting.uriReports.getReportsDashboardConfig,
        { withCredentials: true }
      )
      .pipe(tap((response) => {}))
      .subscribe((resp) => {});
  }

页面加载时，组件A的内容被加载，但我想也加载组件B的内容。

Answer 1

我的理解是，您正在组件 A 上进行 API 调用，但您正在组件 B 上进行相同的 API 调用，因为它已经在 A 中进行了，所以您希望将响应传递给组件 B。

有两种方法可以做到这一点。

您可以使用

@Input

并通过 HTML 传递数据（创建一个新属性并根据需要存储来自 API 的响应，然后再传递到组件 B

<app-componentb [response]="response" [form]="form"/>

TS：

@Component({...}
export class ComponentB {
    @Input() response: any;
    @Input() form: any;

另一种方法是使用通用服务

ng g c CommonService

，确保注入器对象中有

providedIn: 'root'

@Injector({
    providedIn: 'root'
})
export class CommonService {
    response: any;
    form: any;
}

然后在父级上，将您需要的数据分配给服务

A成分

@Component({...})
export class ComponentA {
constructor(private commonService: CommonService) {}

ngOnInit(): void {
        ...
            (response: {
              fields: FieldsDefinition<Form>;
              dimensions?: string;
            }) => {
              this.response = this.commonService.response = response;
              this.form this.commonService.form = this.formGenerator.init(
                {
                  layout: {
                    'grid-template-columns': '1fr 1fr 1fr 1fr',
                    'column-gap': '1.5em',
                  },
                  fields: response.fields,
                },
                this.params
              );
             
            }
          ),

B组份：

@Component({...})
export class ComponentB {
constructor(private commonService: CommonService) {}
 ngOnInit(): void {
    console.log(this.commonService.response);
    // do something with the data!
 }
 ...