Angular 5+服务继承实现遇阻，请求技术协助排查问题

我太懂这种组件复用顺风顺水，到服务这里突然卡壳的郁闷了——毕竟Angular里服务的注入机制和组件逻辑完全不一样，踩坑简直是家常便饭。咱们一步步拆解你可能遇到的问题：

1. 父服务的基础配置大概率出了问题 #

你贴的父服务代码里@Injec...应该是@Injectable吧？这里最容易踩的坑就是父服务的装饰器配置和类定义不对：

• 父服务必须标记为abstract抽象类，避免被Angular直接实例化（我们本来就是要子类继承它，不是直接用父服务）
• 父服务的@Injectable不要随便加providedIn，让子服务来决定注入范围；如果一定要加，也要确保不会和子类的注入规则冲突
• 父类的依赖（比如HttpClient）要用protected修饰，让子类能访问到

正确的父服务写法参考：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { URL } from '../constants';

// 标记为抽象类，避免直接被注入
@Injectable()
export abstract class BaseApiService {
  protected baseUrl = URL.API_BASE;

  // 用protected让子类能访问HttpClient实例
  constructor(protected http: HttpClient) {}

  // 通用的基础方法，子类可以直接复用
  protected get<T>(endpoint: string): Observable<T> {
    return this.http.get<T>(`${this.baseUrl}/${endpoint}`);
  }
}

2. 子服务的构造函数必须正确调用父类 #

很多人会忽略，子类服务必须在构造函数里调用super()，并且把父类需要的依赖（比如HttpClient）传进去，不然父类的依赖无法被初始化：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BaseApiService } from './base-api.service';
import { User } from '../models/user';

// 子服务自己设置注入范围，比如root
@Injectable({ providedIn: 'root' })
export class UserService extends BaseApiService {
  // 必须调用super传入HttpClient
  constructor(http: HttpClient) {
    super(http);
  }

  // 子类专属业务方法，复用父类的get逻辑
  getCurrentUser(): Observable<User> {
    return this.get<User>('users/current');
  }
}

3. 别在组件里注入父服务！ #

这是最容易犯的低级错误：你在组件里要注入的是具体的子服务（比如UserService），而不是抽象的父服务BaseApiService——父服务是抽象类，根本无法被实例化。

错误示例：

// 错误！父服务是抽象类，不能注入
constructor(private baseService: BaseApiService) {}

正确示例：

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  // 注入具体的子服务
  constructor(private userService: UserService) {}
}

4. 检查RxJS导入是否匹配Angular 5+版本 #

Angular 5对应的是RxJS 5.x，你的Observable导入是对的，但如果需要用到操作符（比如map），要单独导入：

import 'rxjs/add/operator/map';

如果按照上面的步骤调整后还是有问题，可以把你的子服务代码和报错信息贴出来，我再帮你精准排查！

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