如何在界面中定义 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 动态更改占位符

如何在 Angular 中为自定义组件实现伪事件?

如何在 fastAPI 中为 <input type="file"> 定义一个 REST 端点(并使其与 Angular 一起使用)?

在Angular中使用Input传递数据时如何处理未定义?

Angular 组件如何使用由用户定义的样式表?

Angular 2 自定义表单输入