在单独的文件中重构长函数

Question

我有一个带有一些搜索功能和一些单选按钮的角度应用程序。而且我的功能变得非常大。因此，我将该函数移到了单独的文件中。但是现在单选按钮不再起作用。

所以组件看起来像这样：

export class ExtendedSearchComponent implements OnInit, OnChanges {

//And here I had this function: 

  setSelectedSearchOptions(optionLabel: string) {

    this.filterSelectedSearchOptios; 
    this.selectedOption = optionLabel;
    this.selectedSearch = optionLabel;

    if (optionLabel === 'Registratie') {
       this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.buttonFilterDisabled = false;
      this.startDate = undefined;
      this.selectedValue = '';
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownMeasurement = false;
      this.showDropdownIndicator = false;
    }

    if (optionLabel === 'Vcheq') {
      this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.showDropdownMeasurement = false;
      this.isButtonVisible = true;
      this.startDate = undefined;
      this.showDropdownVcheqCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownQrCode = false;
      this.showDropdownIndicator = false;

    }

    if (optionLabel === 'Doelen') {
      this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.showDropdownMeasurement = false;
      this.isButtonVisible = false;
      this.startDate = undefined;
      this.selectedValue = ',';
      this.selectedValueOptie = ',';
      this.selectedValueProgressie = ',';
      this.showDropdownQrCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownIndicator = false;

    }
  }

}

组件的模板如下所示：

<form class="from-horizontal" #form="ngForm" [formGroup]="filterSection" (ngSubmit)="closeSearch(form)">
  <div class="filter-plus mat-elevation-z8" [ngClass]="{ expanded: searchExpanded }">
    <div class="filter-plus-search-fields">
      <div class="search-types">
        <mat-radio-group>
          <mat-radio-button
            *ngFor="let option of this.filterListData.searchOptions; let i = index"
            [value]="i"
            [checked]="i === 0"
            [(value)]="option"
            (change)="this.filterSelectedSearchOptios.setSelectedSearchOptions(option.label)"
          >
            {{ option.label }}
          </mat-radio-button>
        </mat-radio-group>
      </div>
</form>

但是我将该功能移到了一个单独的文件中，如下所示：

export class filterSelectedSearchOptions{


  showDropdownQrCode = false;
  showDropdownChallenge = false;
  showDropdownVcheqCode = false;
  showDropdownMeasurement = false;
  showDropdownIndicator = false;
  searchExpanded = false;
  submitEnabled = false;
  buttonFilterDisabled: boolean;

  selectedSearch = 'Registratie';
  selectedValue: string;
  selectedValueStatus: string;
  selectedValueOptie: string;
  selectedVcheqOption: string;
  selectedQrcode: string;

  selectedValueProgressie: string;
  startDate: Date;
  selectedSearchOptions = {};
  isButtonVisible = true;
  isButtonFourVisible = false;
  isButtonFiveVisible = false;
  isButtonMeasurements = false;
  showDatePickerOne = true;
  showDatePickerTwo = true;
  showDatePickerThree = true;
  selectedOption: any = 'Registratie';


   setSelectedSearchOptions(optionLabel: string) {
    //this.filterSection.reset();
    this.selectedOption = optionLabel;
    this.selectedSearch = optionLabel;

    if (optionLabel === 'Registratie') {
       this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.buttonFilterDisabled = false;
      this.startDate = undefined;
      this.selectedValue = '';
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownMeasurement = false;
      this.showDropdownIndicator = false;
    }

    if (optionLabel === 'Vcheq') {
      this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.showDropdownMeasurement = false;
      this.isButtonVisible = true;
      this.startDate = undefined;
      this.showDropdownVcheqCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownQrCode = false;
      this.showDropdownIndicator = false;

    }

    if (optionLabel === 'Doelen') {
      this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.showDropdownMeasurement = false;
      this.isButtonVisible = false;
      this.startDate = undefined;
      this.selectedValue = ',';
      this.selectedValueOptie = ',';
      this.selectedValueProgressie = ',';
      this.showDropdownQrCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownIndicator = false;

    }
}

所以我现在的组件看起来像这样：

export class ExtendedSearchComponent implements OnInit, OnChanges {


  public filterListData:FilterListData;

 ngOnInit() {

 this.filterSelectedSearchOptios = new filterSelectedSearchOptions();
} 

组件的模板现在看起来像这样：

<form class="from-horizontal" #form="ngForm" [formGroup]="filterSection" (ngSubmit)="closeSearch(form)">
  <div class="filter-plus mat-elevation-z8" [ngClass]="{ expanded: searchExpanded }">
    <div class="filter-plus-search-fields">
      <div class="search-types">
        <mat-radio-group>
          <mat-radio-button
            *ngFor="let option of this.filterListData.searchOptions; let i = index"
            [value]="i"
            [checked]="i === 0"
            [(value)]="option"
            (change)="this.filterSelectedSearchOptios.setSelectedSearchOptions(option.label)"
          >
            {{ option.label }}
          </mat-radio-button>
        </mat-radio-group>
      </div>
</form>

但是现在单选按钮不再起作用。

所以我的问题是。我必须解决什么，以便单选按钮可以再次与新创建的文件一起使用：filterSelectedSearchOptions

以及如何重构该函数：setSelectedSearchOptions？

谢谢

Answer 1

在您的重构代码this中引用了另一个类，该代码在您的组件中不起作用。因此，您可以使用inheritance代替，因此将代码移到另一个文件中，然后在extands您的组件类中使用类似的代码

export class ExtendedSearchComponent implements OnInit, OnChanges extends filterSelectedSearchOptions {

无需更改HTML