如何在界面中定义 Angular 的 @Input 装饰器?
Posted
技术标签:
【中文标题】如何在界面中定义 Angular 的 @Input 装饰器?【英文标题】:How to define angular's @Input decorator in an interface? 【发布时间】:2018-10-01 13:16:04 【问题描述】:给出以下 Angular 组件:
export class NumberComponent implements NumberInterface
@Input() number;
constructor()
现在我期待着实现NumberInterface
。这就是我到目前为止所得到的:
export interface NumberInterface
number: number
基本上,我使用Function
类型来定义装饰器。现在我想知道是否有更具体的方法来做到这一点。接口应该强制组件实现 Angular 的 @Input
装饰器。
【问题讨论】:
NumberComponent implements NumberInterface
在 Angular 中不是一个东西。尽管有这个名字,它并不是一个类接口,,而只是一个类型的集合。
【参考方案1】:
Typescript 中的接口严格来说是没有价值的,因为它们是只存在于类型检查而不编译成 JS 的实体。
您不能在接口中定义装饰器,因为装饰器具有值。它是一个接受参数并为类属性赋值的函数,而不是类型。
Angular 的 @Input
装饰器本身确实有类型,但不可能在低阶类中键入它们,因为该属性本身已经是一个类型,但由装饰器赋予 value:
export interface ITest
prop: Input;
prop2: InputDecorator;
export class Test implements ITest
@Input('thing') prop: string;
@Input('thing2') prop2: string;
// typeerror: Test does not correctly implement ITest
然而,组件类可以在 Angular 中派生,并且父类的装饰器将由子类继承。如果您想在代码中实现更多的多态方法,这将非常有用:
export class NumberBase
@Input('number') number: number;
export class NumberComponent extends NumberBase
ngOnInit()
console.log(this.number); // works!
组件可以扩展普通的 TS 类或完全修饰的 Angular 组件。
【讨论】:
谢谢,extending
带来了我想要的行为。如此精彩的答案!
我认为 super()
需要在组件的 constructor()
中调用,因为它正在扩展一个类
是的,如果你有构造函数,super
调用需要是构造函数主体的第一行。 TS 编译器会让你很快知道 :)以上是关于如何在界面中定义 Angular 的 @Input 装饰器?的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 Material Input 动态更改占位符
如何在 fastAPI 中为 <input type="file"> 定义一个 REST 端点(并使其与 Angular 一起使用)?