在 Angular2 组件上使用 mixin 时缺少属性

Posted 2023-02-22

【中文标题】在 Angular2 组件上使用 mixin 时缺少属性

【英文标题】：Property missing when using mixin on Angular2 component

【发布时间】：2017-04-07 16:20:49

【问题描述】：

我需要能够从几个可重用的类组成一个 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] 类“RegistrationFormComponent”错误实现 界面'DateOfBirthForm'。类型中缺少属性“dobMonth” 'RegistrationFormComponent'。

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

【参考方案1】：

查看您提供的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() 

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

【讨论】：

我有多个 mixin 类。我会改变我的问题以反映这一点。

嗯。当我在RegistrationFormComponent 中放入dobMonth 的存根然后在类初始化后记录它时，它返回undefined，即使它在null 的mixin 中有一个值（或我设置的任何其他值）

也许还有另一种方法可以解决这个问题？我对 TypeScript 的经验有些有限。我想做的是扩展或实现定义我想要封装的所有属性和方法的类，以保持代码干燥，然后在父类中公开它们。我这里还有其他选择吗？

有趣的是，我能够获得一个属性来填充在实现类上定义的父级，但是数据不会绑定到模板。如果我删除 implements DateOfBirthForm，模板会按预期填充。看起来我可能只需要制作单独的组件并将它们与状态缝合在一起：/

Angular 2 组件通常倾向于组合而不是继承......继承通常可以以一种或另一种方式替换为组合。发人深省！

【参考方案2】：

如您提到的链接中所述，“手动混合”有很多怪癖。缺少的存根只是其中之一，一旦您尝试添加私有/受保护的成员，您将获得更多。

TypeScript 2.2 提供了适当的 Mixin 类来解决这些问题。我在这里描述了如何将它们用于角度组件：

How to Extend/Inherit Angular2 component?