Angular抽象指令无法提供服务问题求助

本质原因 #

Angular的依赖注入系统仅处理被Angular实例化的具体类（比如Component、Directive等），抽象类不会被Angular实例化，因此你添加在抽象类上的@Directive装饰器及其内部的providers配置，完全不会被Angular的注入系统识别。

当你在抽象类中使用inject()注入CalendarComponentStateService时，Angular会去当前实例化的具体组件（即继承抽象类的EventsCalendarComponent）的注入器中查找服务提供者。由于抽象类的@Directive配置未被处理，注入器中没有对应的服务注册，因此抛出NullInjectorError。

只有在具体组件的@Component装饰器中配置providers时，组件的注入器才会注册该服务，inject()才能正常找到并注入实例。

验证方法 #

你可以直接删除抽象类上的@Directive装饰器，代码仍会抛出相同的错误——这证明该装饰器对Angular没有任何实际作用。抽象类只是TypeScript层面的代码复用机制，Angular不会将其视为可实例化的指令或组件。

优化方案（避免子类重复配置） #

如果想避免在每个继承的具体组件中重复配置providers，可以采用以下两种方式：

• 服务级别配置：修改CalendarComponentStateService的@Injectable装饰器，设置providedIn: 'component'，这样每个组件实例化时会自动创建该服务的专属实例，无需在组件中手动配置providers：

  @Injectable({
    providedIn: 'component'
  })
  export class CalendarComponentStateService {}
  

• 基类指令+hostDirectives：创建一个包含providers配置的具体指令类，然后让组件通过hostDirectives引入该指令，指令的providers会被合并到组件的注入器中：

  @Directive({
    providers: [CalendarComponentStateService]
  })
  export class EventsBaseDirective {}
  
  @Component({
    selector: 'app-events-calendar',
    templateUrl: './events-calendar.component.html',
    styleUrls: ['./events-calendar.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    hostDirectives: [EventsBaseDirective]
  })
  export class EventsCalendarComponent extends AbstractEventsComponent {}
  

内容的提问来源于stack exchange，提问作者jenson-button-event