Angular 9 : Abstract component's children not inheriting its attributes

Question

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

Can't bind to 'form' since it isn't a known property of '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();
}