我有一个具有相似属性的组件的模块,所以我创建了一个抽象 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() {
}
}
最佳答案
您需要使用 @Directive
装饰器能够从另一个组件扩展它:
@Directive()
export abstract class MyFilter<T> {
@Input() form: FormGroup;
@Input() filterOpened: boolean;
@Input() enableSubmit: boolean;
@Output() filterUsed = new EventEmitter<T>();
abstract useFilter();
}
关于 Angular 9 : Abstract component's children not inheriting its attributes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60602955/