Reusable component in Angular - With change to match my requirement-CodePudding

I have a reusable component that I have to use but one function I need to have changed. Is there a way to do this without maninpulating the generic component to my case? The question is how to have a different function for my instance of component without changing the generic design of the reusable componenent

In my case I need to send a few more variables to server in the function

current

sendCode(phone : string){
}

what I need

sendCode(phone: string, code: string, name: string(){}

CodePudding user response：

You can create a class and extend it to your component. Anything like that:

class ReusableExtension {
  sendCode(phone: string, extra?: Params) {
    // Do anything
  }
}

class MyComponent extends ReusableExtension {
  sendCode(phone: string, extra: Params) {
    console.log(extra);
  }
}

const child1 = new MyComponent();
child1.sendCode("0123456", { address: "My Street 1" });

Where child1 can be your component. In the MyComponent I remove the question mark so the extra parameter is no longer optional.

Greetings, Flo