如何在接口中定义angular的@Input装饰器？

发布时间：2020-12-17 17:37:10 所属栏目：安全来源：网络整理

导读：给出以下Angular组件： export class NumberComponent implements NumberInterface { @Input() number; constructor() { }} 现在我期待实现NumberInterface.这就是我到目前为止所得到的： export interface NumberInterface { number: number} 基本上,我使用

给出以下Angular组件：

export class NumberComponent implements NumberInterface {
  @Input() number;
  constructor() { }
}

现在我期待实现NumberInterface.这就是我到目前为止所得到的：

export interface NumberInterface {
  number: number
}

基本上,我使用类型Function来定义Decorator.现在我想知道是否有更具体的方法来做到这一点.界面应该强制组件实现angular的@Input装饰器.

解决方法

Typescript中的接口严格没有值,因为它们是仅存在于类型检查中的实体,不会编译为JS.

您无法在界面中定义装饰器,因为装饰器具有值.它是一个函数,它接受一个参数并为类属性赋值,而不是一个类型.

Angular装饰器本身确实有输入,但是在低级类中输入它们是不可能的,因为该属性本身已经是一个类型,但是装饰器给出了值：

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组件.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!