Angular 9：抽象组件的子组件不继承其属性

Question

我有一个包含具有相似属性的组件的模块，因此我创建了一个抽象MyFilter<T>组件，该组件具有一组带有@Injectable装饰器的属性。升级到 Angular 9 后，我在控制台收到警告

无法绑定到“form”，因为它不是“my-text-filter”的已知属性。

和错误，因为子组件无法识别父组件的属性。这是一些代码：

@Injectable()
export abstract class MyFilter<T> {

  @Input() form: FormGroup;
  @Input() filterOpened: boolean;
  @Input() enableSubmit: boolean;
  @Output() filterUsed = new EventEmitter<T>();

  abstract useFilter();
}

这是一个子组件：

@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() {
    this.form.get('value').valueChanges.pipe( // ERROR: cannot find 'get' of undefined
        debounceTime(50)
    ).subscribe(() => this.useFilter());
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes) // this doesn't get logged in the console, 
                         // even if I comment out what's in ngOnInit
  }

  useFilter() {
  }

}

Answer 1

您需要使用@Directive装饰器才能从另一个组件扩展它：

@Directive()
export abstract class MyFilter<T> {

  @Input() form: FormGroup;
  @Input() filterOpened: boolean;
  @Input() enableSubmit: boolean;
  @Output() filterUsed = new EventEmitter<T>();

  abstract useFilter();
}