在Angular中扩展多个类

发布于06月28日

I want to achieve:个

export class MyComponent extends AbstractClass1, AbstractClass2

我经历了以下打字脚本的混合，在这种情况下可能会有所帮助:

applyMixins(derivedCtor: any, baseCtors: any[]) {
        baseCtors.forEach((baseCtor) => {
            Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
                if (name !== 'constructor') {
                    derivedCtor.prototype[name] = baseCtor.prototype[name];
                }
            });
        });
    };

现在，我不确定如何实施才能达到我的结果.我找不到任何关于安吉尔的文件.我们是必须在相同的组件中执行该操作，还是必须创建新的基本组件？怎样才能做到这一点？我试着在扩展后直接使用它，但无法使其工作.

推荐答案

我不建议使用混音器，因为它们在Angular 上被多次折断.

下面是一个例子:

class AbstractClass1 {
    public sayAbstract1(word: string) {
      console.log('AbstractClass1: ' + word);
    }
}

class AbstractClass2 {
    public sayAbstract2(word: string) {
      console.log('AbstractClass2: ' + word);
    }
}

class MyComponent {

}

interface MyComponent extends AbstractClass1, AbstractClass2 {}

applyMixins(MyComponent, [AbstractClass1, AbstractClass2]);

const instance = new MyComponent();

instance.sayAbstract1('Hi!');
instance.sayAbstract2('Hi!');

function applyMixins(derivedCtor: any, constructors: any[]) {
  constructors.forEach((baseCtor) => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
      Object.defineProperty(
        derivedCtor.prototype,
        name,
        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
      );
    });
  });
}

点击此处查看更多示例:https://www.typescriptlang.org/docs/handbook/mixins.html

Angular相关问答推荐

为什么当没有可观察对象发出值时，我的RxJS合并订阅会触发？

在Angular中扩展多个类

推荐答案

Angular相关问答推荐

为什么当没有可观察对象发出值时，我的RxJS合并订阅会触发？

如何在Angular应用程序部署中安全地管理环境变量

Angular Signal只指一种类型，但这里用作值.ts(2693)''

带有两个注入服务的函数式解析器(Angular 15)

有Angular react 形式的输入用货币管

如何从URL中角下载图片？

如何解决在StackBlitz中使用SPARTIER时出现无法解析解析器错误(&C)？

如何使用来自不同可观测对象的值更新可观测对象

MonoTypeOperatorFunction不可分配给OperatorFunction类型的参数

由于ngcc操作失败，Angular扩展可能无法正常工作

NgRx Effects 抛出类型错误，我不知道发生了什么

Cypress 12.8.1 无法使用条纹元素 iframe

在ngOninit方法中直接VS初始化属性

Angular 在关闭另一个对话框后打开另一个对话框的最佳做法是什么？

Angular：如何设置 PrimeNG p-steps 组件中已完成步骤的样式？

没有调用订阅的原因是什么？

如何使用ngrx和effects 订阅成功回调

Angular 2 - 什么是Root Scope？

使用 Angular 2 新路由更改页面标题

unexpected token < 错误