Angular 5组件继承问题：子组件无法获取父组件HTTP订阅数据

首先，我注意到你可能忽略了一个关键细节：子组件的ngOnInit必须调用父组件的同名方法，否则父组件里的HTTP请求根本不会执行，portfolios自然是空的。先修正这一点：

// 子组件的ngOnInit
ngOnInit() {
  super.ngOnInit(); // 必须调用父组件的初始化逻辑，触发HTTP请求
  console.log(this.portfolios); // 但这里可能还是空，因为HTTP是异步的
}

为什么打印还是空？因为HTTP请求是异步操作，父组件的ngOnInit里发起请求后，代码会继续执行，子组件的ngOnInit结束时，请求可能还没返回数据，所以portfolios还没被赋值。

接下来给你两种无需子组件手动订阅的解决方案：

方案1：使用钩子方法（推荐） #

在父组件中定义一个保护级别的钩子方法，当数据加载完成后调用它，子组件只需重写这个方法就能拿到数据：

父组件代码 #

import { Component, OnInit } from '@angular/core';
import { MasterService } from './master.service';

export class ParentComponent implements OnInit {
  protected portfolios: any[] = [];

  constructor(protected _MasterService: MasterService) {} // 用protected让子组件能访问服务

  ngOnInit() {
    this._MasterService.getRegular('Theodore/portfoliolist')
      .subscribe((data: any) => {
        this.portfolios = data;
        this.onPortfoliosLoaded(data); // 数据加载完成后触发钩子
      });
  }

  // 定义钩子方法，子组件可重写
  protected onPortfoliosLoaded(data: any[]) {}
}

子组件代码 #

import { Component, OnInit } from '@angular/core';
import { ParentComponent } from './parent.component';

export class ChildComponent extends ParentComponent implements OnInit {
  ngOnInit() {
    super.ngOnInit(); // 触发父组件的HTTP请求
  }

  // 重写钩子方法，拿到加载完成的数据
  protected onPortfoliosLoaded(data: any[]) {
    console.log('子组件拿到的数据：', data);
    console.log('父组件的portfolios数组：', this.portfolios); // 这里也能直接访问
  }
}

方案2：用BehaviorSubject保存数据状态 #

如果需要在子组件的任意时机获取最新数据，可以用RxJS的BehaviorSubject来存储数据，它会保存最新值，子组件无需手动订阅（也可通过订阅获取实时更新）：

父组件代码 #

import { Component, OnInit } from '@angular/core';
import { MasterService } from './master.service';
import { BehaviorSubject } from 'rxjs';

export class ParentComponent implements OnInit {
  protected portfolios$ = new BehaviorSubject<any[]>([]); // 初始值为空数组
  protected portfolios: any[] = [];

  constructor(protected _MasterService: MasterService) {}

  ngOnInit() {
    this._MasterService.getRegular('Theodore/portfoliolist')
      .subscribe((data: any) => {
        this.portfolios = data;
        this.portfolios$.next(data); // 更新Subject的最新值
      });
  }
}

子组件代码 #

import { Component, OnInit } from '@angular/core';
import { ParentComponent } from './parent.component';

export class ChildComponent extends ParentComponent implements OnInit {
  ngOnInit() {
    super.ngOnInit();

    // 直接获取当前最新数据，无需订阅
    console.log('当前最新数据：', this.portfolios$.getValue());

    // 或者在模板中用AsyncPipe，完全不用手动处理订阅：
    // <div *ngFor="let item of portfolios$ | async">{{item.name}}</div>
  }
}

最后提醒一下：

• 父组件中要把portfolios、服务实例等声明为protected，这样子组件才能访问（如果用private就不行）。
• 异步操作的核心是等待数据加载完成后再处理，钩子方法是最直观的方式，很适合你的场景。

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