javascript - 向类添加函数

我有一个基础应用程序，我将其安装到不同的客户那里，并向其中添加他们所请求的功能。

假设一个具有

component-base.html
component-base.ts

现在有一个客户要求我定制它，我所做的是复制那两个文件：

client-base-component1.html
client-base-component1.ts

并且在angular.json中我告诉他

          "fileReplacements": [
            {
              "replace": "src / components / component-base.html",
              "with": "src / components / component-base-client1.html"
            },
            {
              "replace": "src / components / component-base.ts",
              "with": "src / components / component-base-client1.ts"
            },

然后我在那里添加功能，但由于最后有很多客户端，我重复了很多代码。

在 HTML 中，我觉得这是不可能的，但有没有一种可能性，而不是必须在 component-base-client1.ts 中复制所有函数，而是导入所有代码，只在新的文件中放入我开发的新函数（并且只使用 component-base-client1.html），或者更好的是，能够用 component-base-client1.ts 中的函数覆盖 component-base.ts 中的函数，如果在 component-base-client1.ts 中没有相应的函数，则使用 component-base.ts 中的函数？

我知道在这里解释我正在寻找的东西很困难，但这对于更好地整理我的文件会非常有用。

谢谢

答案＃1

你需要使用类继承。

// Your base component
export class BaseComponent 
    public Function1(): void {
    }
}

// Your client component extending you BaseComponent (this is the inheritance)
export ClientComponent extends BaseComponent {

    // You can override BaseComponent Function1()
    public Function1(): void {
        // You can still call base Function1 on your overrided Function1
        super.Function1();
    }

    // You can add client specific functions
    public ClientSpecificFunction(): void {
    }
}

如果你的 BaseComponent 注入了服务，你必须在继承类的构造函数中注入它们：

export class BaseComponent 

    // Your base component constructor
    constructor(public router: Router) {
    }
}

export ClientComponent extends BaseComponent {

    constructor(public router: Router) {
        super(router);
    }
}