CODEWITHSUNDEEP
javascriptangulartypescript
Ulises 2010
Ulises 2010

Reputation: 508

Add function to a class

I have a base application that I install to different costumers and to which I add the functionalities that they requests.

Suppouse a single base component that has

component-base.html
component-base.ts

Now a client asks me to customize it and what I do is duplicate those two files:

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

and in the angualar.jons I tell him

          "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"
            },

and then I add the functionality there, but as there are many clients in the end I duplicate a lot of code.

In the html I imagine that it is not possible, but is there a possibility instead of having to duplicate all the functions in component-base-client1.ts, import all the code and just put in the new ones the new functions that I develop (and that only the component-base-client1.html would be used), or even better, to be able to overwrite the functions that are in component-base.ts with those of component-base-client1.ts and in case they are not in component-base-client1.ts component-base.ts are used?

I know it is difficult to explain here what I am looking for, but it would be very useful to better organize my files.

Thank you

Upvotes: 2

Views: 203

Answers (1)

Ben
Ben

Reputation: 4110

You need to use class inheritance.

// 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 {
    }
}

If your BaseComponent injects services, you have to inject them in the inheriting class constructor:

export class BaseComponent 

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

export ClientComponent extends BaseComponent {

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

Upvotes: 1

Related Questions