Separate Methods of an Angular Component 6

Question

Hello everyone, I have a Component with 1266 lines, due to its large volume of methods, I need to separate these methods to facilitate a future maintenance, only problem in this is that I have local variables, and these methods most consume these variables, how I can separate these methods without having to break all my code ?

I tried to create a Heldp Component, and my Main Component would pass as parameters .

EX -- Component in the same directory "Myrdesp"

//ComponentPrincipal

export class ExpenseReportsFormComponent implements OnInit {

help: any; 

help = ComponentHelp

this.help.populateField(item,this) // this mandaria todo dados do meu component

}

//component que teria metodos
export class ComponentHelp{

//metodo
populateField(item:any,component:any){
// funlçoes  do meotdo 
component.form['controls']['itens']['controls'][i]['controls'].id.setValue(item.id);
          component.form['controls']['itens']['controls'][i]['controls'].currencyAlias.setValue(item.currencyAlias);
          component.form['controls']['itens']['controls'][i]['controls'].product.setValue(item.productId);
          component.form['controls']['itens']['controls'][i]['controls'].currency.setValue(item.currencyId);
          component.form['controls']['itens']['controls'][i]['controls'].productIcon.setValue(item.productIcon);
          component.form['controls']['itens']['controls'][i]['controls'].value.setValue(item.value);
}

}

But he gives me a mistake saying that I do not exist in Componenthelp

Could someone tell me why I can’t do this process? And what’s the best way ?

Answer 1

After some time of experience I had a solution for this method. I don’t know if this is the best one. But I treated it as follows.

I create a component.ts he will be responsible for managing any kind of infection he needs.

export class ExpenseReportsFormComponentManager {


  public static generateForm(component: any): any {
    let itemForm = component._formBuilder.group({
      id: [null],
      product: [null, [Validators.required]],
      productIcon: [null],
      description: [null]
    });

    return itemForm;


  }
}

This top Component I am leaving him responsible for generating Form of my website

Now in this Chief Committee we instantiate this Committee and every time we call some method that belongs to the ExpenseReportsFormComponentManager we must pass by parameter this which will be all of our Component, and we can handle any variavelel in the main Component

export class ExpenseReportsFormComponent implements OnInit, AfterViewInit {
  managerComponent: any
  this.managerComponent = ExpenseReportsFormComponentManager;
  
  this.managerComponent.generateForm(this);
}