angular - 组件@Input继承

Question

我在组件继承方面遇到问题，我正在尝试为内部组件和服务实现类层次结构。我有几个类为实际组件提供通用功能，目的是使代码更易于管理。

例如，我有一个(本质上是抽象的)基类:

@Component({
  selector: 'ic-base-alpha-locale-sensitive-input',
  template: '<div></div>'
})
export class BaseAlphaLocaleSensitiveInput extends BaseAlphaInput implements OnInit {

  @Input()
  charCase: TextCaseType;
  ....
}

我尝试在后代中使用:

export class AlphabeticInputComponent extends BaseAlphaLocaleSensitiveInput 
implements OnInit {
  ...
}

使用模板

<input ... [charCase]="caseConvert" #input="ngModel" ...>

我收到一个错误:

无法绑定(bind)到“charCase”，因为它不是“input”的已知属性。 ... [错误 ->][charCase]="caseConvert"

What is the proper way to inherit @Input bindings in descendant classes?

或

In general what is the best practice for implementing abstract classes from which several component implementations can inherit common methods, properties and bindings?

Answer 1

你不应该使用 input 标签，而是你在 @Component 中定义的选择器:

<ic-alphabetic-input [charCase]="caseConvert" #input="ngModel"></ic-alphabetic-input>