Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在接口中定义angular的@Input装饰器?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
给出以下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组件.

大佬总结

以上是大佬教程为你收集整理的如何在接口中定义angular的@Input装饰器?全部内容,希望文章能够帮你解决如何在接口中定义angular的@Input装饰器?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。