Angular 2：如何继承带有依赖注入的组件类？

嘿，我来帮你搞定这个组件继承的依赖传递问题！你遇到的核心点在于：Angular的依赖注入不会自动继承父类的依赖，所以父类构造函数里的每一个参数，你都得在子类里显式注入，然后通过super()按顺序传递给父类。

下面是具体的处理步骤和完整代码示例：

步骤拆解 #

• 对于@Inject(DOCUMENT)修饰的doc：在子类构造函数中同样用@Inject(DOCUMENT)注入该依赖
• 对于@Attribute修饰的tabindex和autofocus：在子类构造函数中用相同的@Attribute装饰器获取参数
• 父类中的sanitizer、cdRef这些依赖，子类也需要一一注入后传递

完整的子类代码 #

import { Component, Inject, Attribute, Renderer2, DomSanitizer, ChangeDetectorRef, DOCUMENT } from '@angular/core';
import { AngularComponent, AngularEditorService } from './path-to-angular-component'; // 替换成实际文件路径

export class EnhancedComponent extends AngularComponent {
  constructor(
    // 注入父类需要的所有依赖，顺序要和父类构造函数完全一致
    private r: Renderer2,
    private editorService: AngularEditorService,
    @Inject(DOCUMENT) private doc: any,
    private sanitizer: DomSanitizer,
    private cdRef: ChangeDetectorRef,
    @Attribute("tabindex") defaultTabIndex: string,
    @Attribute("autofocus") private autoFocus: any
  ) {
    // 严格按照父类构造函数的参数顺序，把所有依赖传给super
    super(r, editorService, doc, sanitizer, cdRef, defaultTabIndex, autoFocus);
  }
}

关键注意点 #

• 参数顺序必须严格匹配：super()的参数顺序要和父类构造函数的参数顺序完全一致，Angular依赖注入是按位置解析的，顺序错了会导致依赖不匹配
• 不要遗漏任何参数：父类构造函数里的每一个参数，不管是注入的服务还是属性参数，都要在子类里处理后传递
• 访问修饰符的处理：如果子类需要使用这些依赖，可以给参数加上private/public修饰符；如果不需要，也可以不加（但为了代码清晰建议统一加上）

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