在Angular2组件

时间:2016-11-23 15:19:58

标签: angular typescript

我需要能够从几个可重用的类中组成一个Angular 2组件。因此,我尝试使用这些指南实现Mixins:

https://medium.com/@danny_mylian/mixins-as-class-decorators-in-typescript-angular2-8e09f1bc1f02#.jplhjv33t

https://www.typescriptlang.org/docs/handbook/mixins.html

这是我的代码的缩写版本。我有多个mixin类,所以我不能扩展另一个类:

//date-of-birth-form.ts
export class DateOfBirthForm {
  dobMonth: number = null;
  . . .
}

//registration-form.component.ts
@Component({
  templateUrl: './registration-form.component.html',
})
@Mixin([DateOfBirthForm, ...])
export class RegistrationFormComponent implements DateOfBirthForm {
  . . .
}

我得到的问题是:

  

[ts] Class' RegistrationFormComponent'错误实施   界面' DateOfBirthForm'。物业' dobMonth'在类型中缺失   ' RegistrationFormComponent'

我做错了什么?基本上我需要做的是将表单组添加到父表单,但是一些表单组件调用Web服务或调用本地方法来计算我想要封装在Mixin类中的数据。

2 个答案:

答案 0 :(得分:0)

查看您提供的page上的示例:

@Mixin([Disposable, Activatable])
export class TableViewComponent implements Disposable, Activatable {
   // Disposable
   isDisposed: boolean = false;
   dispose: () => void;
   // Activatable
   isActive: boolean = false;
   activate: () => void;
   deactivate: () => void;
   constructor() {}
}

看起来这种技术需要你添加已实现的mixins的不同属性/方法的存根,以使编译器满意。

答案 1 :(得分:0)

手动" mixins有很多怪癖。如您提及的链接中所述。缺少的存根只是其中之一,一旦您尝试添加私人/受保护的成员,您将获得更多。

TypeScript 2.2提供了适当的Mixin类,可以解决许多这些问题。我在这里描述了如何将它们用于角度分量:

How to Extend/Inherit Angular2 component?