Angular 7 如何避免多组件重复注入依赖并通过父类复用？

绝对可以解决！在Angular 7里，要避免多个组件重复注入同一依赖，用抽象基类统一管理依赖注入是最优雅的方案之一，既能减少重复代码，又能保证类型安全。我给你两种实用的实现方式，你可以根据场景选择：

这种方式最直观，依赖由Angular的DI系统自动解析，类型检查也更严谨。

首先创建一个抽象基类，在它的构造器中注入共享依赖，并使用protected修饰符让子类可以访问：

import { Injectable } from '@angular/core';
import { SharedDependencyService } from './shared-dependency.service';

// 抽象基类，仅用于继承，不能直接实例化
export abstract class BaseComponent {
  constructor(protected sharedDep: SharedDependencyService) { }
}

然后让你的业务组件继承这个基类，在子类的构造器中调用super()并传递依赖即可——不需要再重复注入：

import { Component } from '@angular/core';
import { BaseComponent } from './base.component';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html'
})
export class UserProfileComponent extends BaseComponent {
  constructor(sharedDep: SharedDependencyService) {
    super(sharedDep); // 必须调用super传递依赖给父类
  }

  handleAction() {
    // 直接通过this.sharedDep使用依赖
    this.sharedDep.performOperation();
  }
}

为什么推荐这个方案？

• 类型安全：依赖的类型在基类中定义后，子类自动继承，不会出现类型不匹配的问题
• 代码清晰：所有共享依赖的注入逻辑集中在基类，子类只需要关注自己的业务逻辑
• 符合Angular DI的设计理念，不需要额外的手动依赖获取逻辑

如果你的组件层级比较复杂，或者希望子类完全不用处理构造器参数，可以通过Injector来手动获取依赖：

首先修改基类：

import { Injector } from '@angular/core';
import { SharedDependencyService } from './shared-dependency.service';

export abstract class BaseComponent {
  protected sharedDep: SharedDependencyService;

  constructor(injector: Injector) {
    // 从Injector中获取共享依赖
    this.sharedDep = injector.get(SharedDependencyService);
  }
}

然后子类只需在构造器中传递Injector给父类即可：

import { Component, Injector } from '@angular/core';
import { BaseComponent } from './base.component';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html'
})
export class SettingsComponent extends BaseComponent {
  constructor(injector: Injector) {
    super(injector);
  }
}

关键注意事项：

• 基类必须是抽象类，避免被意外实例化
• 不要给基类添加@Component装饰器，否则Angular会将其视为独立组件，引发DI异常
• 如果共享依赖有多个，方案一的可读性会比方案二更优

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