Angular 9：抽象组件属性未被子组件继承问题

你碰到的问题根源其实很明确——抽象类错误地使用了@Injectable装饰器，这直接导致Angular无法正确识别父类中的@Input/@Output属性，进而引发了后续的一系列异常。

问题根源拆解 #

1. @Injectable是服务专属装饰器：你给组件基类加了@Injectable，但这个装饰器是用来标记可注入服务类的，完全不适合组件基类。Angular会把带@Injectable的类当成服务处理，不会解析其中的@Input装饰器，所以子组件根本继承不到这些输入属性——这就是模板绑定[form]报错、this.form在ngOnInit中为undefined，以及ngOnChanges不触发的核心原因。
2. 输入属性未被正确识别：由于父类的@Input没被Angular解析，子组件的输入属性列表是空的，自然不会有变化触发ngOnChanges，模板传递的form值也不会被赋值到this.form上。

修复步骤 #

1. 移除抽象类的@Injectable装饰器 #

把抽象类改成普通的抽象类，去掉服务装饰器是关键：

// 去掉@Injectable()，让Angular把它当作组件基类处理
export abstract class MyFilter<T> {
  @Input() form: FormGroup;
  @Input() filterOpened: boolean;
  @Input() enableSubmit: boolean;
  @Output() filterUsed = new EventEmitter<T>();
  abstract useFilter(): void;
}

2. 调整子组件逻辑，确保form初始化后再操作 #

ngOnInit执行时form可能还没完成绑定，所以我们结合ngOnChanges监听form的变化，安全地设置值监听：

@Component({
  selector: 'my-text-filter',
  templateUrl: './text-filter.html',
  styleUrls: ['./text-filter.scss']
})
export class MyTextFilter extends MyFilter<TextFilter> implements OnInit, OnChanges {
  constructor() {
    super();
  }
  
  ngOnInit() {
    // 初始化时先检查form是否已赋值
    if (this.form) {
      this.setupValueChangeListener();
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes); // 现在应该能看到输入属性的变化日志了
    // 当form被赋值或更新时，重新设置监听
    if (changes.form && changes.form.currentValue) {
      this.setupValueChangeListener();
    }
  }

  private setupValueChangeListener() {
    // 用可选链操作符?.避免form.get('value')为undefined时报错
    this.form.get('value')?.valueChanges.pipe(
      debounceTime(50)
    ).subscribe(() => this.useFilter());
  }

  useFilter(): void {
    // 在这里实现你的过滤逻辑，比如发射过滤参数
    this.filterUsed.emit(/* 你的TextFilter类型数据 */);
  }
}

3. 额外检查：确保模板正确传递输入属性 #

确认在父组件模板中正确传递了form属性，且父组件的form是已初始化的FormGroup实例：

<!-- 父组件模板 -->
<my-text-filter [form]="filterForm"></my-text-filter>

// 父组件中初始化form
filterForm = new FormGroup({
  value: new FormControl('')
});

补充：如果抽象类需要注入服务怎么办？ #

如果抽象类依赖服务，不要给它加@Injectable，而是在抽象类构造函数中声明依赖，让子组件传递这些依赖：

// 抽象类
export abstract class MyFilter<T> {
  constructor(private http: HttpClient) {} // 声明依赖
  // ...其他属性和方法
}

// 子组件
export class MyTextFilter extends MyFilter<TextFilter> implements OnInit, OnChanges {
  constructor(http: HttpClient) {
    super(http); // 传递依赖给父类
  }
  // ...
}

Angular会在创建子组件时自动注入所需服务，完全不需要给抽象类加@Injectable。

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