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？

谢谢

如果我这样做：

export class ExtendedSearchComponent extends  FilterSelectedSearchOptions implements OnInit, OnChanges 

 public filterSelectedSearchOptios: FilterSelectedSearchOptions;


 ngOnInit() {


    this.filterSelectedSearchOptios = new FilterSelectedSearchOptions();

}

单选按钮仍然不起作用。我没有收到任何错误，但如果选择单选按钮，则不会更改

Answer 1

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

export class ExtendedSearchComponent extends filterSelectedSearchOptions implements OnInit, OnChanges  {

无需更改HTML

Answer 2

关键字“ this ”的值开始引用使用“ new filterSelectedSearchOptions（）;”时创建的另一个对象。值。因此，更好的方法是在component.ts文件中使用以下语法：

    this.filterSelectedSearchOptios = filterSelectedSearchOptions;

（通过使用 seperate 文件中的导入获取RHS参考，在该文件中，您已导出 filterSelectedSearchOptions 类）

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

2 个答案: