组件@Input继承答案

【问题标题】：Component @Input inheritance组件@Input继承
【发布时间】：2017-07-04 13:18:24
【问题描述】：

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

例如，我有一个（本质上是抽象的）基类：

@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" ...>

我得到一个错误：

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

在后代中继承 @Input 绑定的正确方法是什么上课？

或

一般来说，实现抽象类的最佳实践是什么几个组件实现可以从中继承共同的方法、属性和绑定？

【问题讨论】：

您使用的是哪个版本的 Angular？因为这是相对较新的功能
使用<alphabetic-input-component ... [charCase]="caseConvert" #input="ngModel" ...></alphabetic-input-component> 而不是<input ...
您能否展示您用于AlphabeticInputComponent 的@Component 声明
我使用的是 4.0.0 - 正在升级到 4.2.2。这就是组件的装饰方式：@Component({ selector: 'ic-alphabetic-input', templateUrl: './alphabetic-input.component.html', styleUrls: ['./alphabetic-input.component.scss'], }) 我想避免多次定义模板 - 据我所知它将被子类完全覆盖。
@PierreDuc，新功能 - 这是什么？

标签： angular typescript

【解决方案1】：

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

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

【讨论】：

是的，我明白了，谢谢。在我将它们分离为单独的模块之前，相同的模板工作起来很奇怪。只要我只用它工作的基类导入脚本 - 现在我不明白为什么。
实际上 charCase 参数是指令的一部分（我不知道为什么它没有得到 Input 绑定）。它不属于标签。