Question

我有一个重复性很强的HTML组件。

<comp dataKey="priceListId" id="priceList" name="priceList"
formControlName="priceList" [searchFields]="priceListSearchFields"
[searchGridFields]="priceListSearchGridFields"
[searchGridData]="priceListSearchGridData" [multiple]="false"
[compSuggestions]="priceListSuggestions"
(onCompRequest)="priceListRequest($event)"
(onSearchRequest)="priceListSearchRequest($event)" compDisplayField="label"
(onClear)="priceListOnChange()" (onSelect)="priceListOnChange()"
[searchTotalRecords]=priceListSearchTotalRecords
[searchTitle]="'priceListTitle' | translate"
[searchEmptyTitle]="'nothing_found' | translate"
[filterLabel]="'filter' | translate" [clearLabel]="'clear' | translate"
[cancelLabel]="'cancel' | translate" [selectLabel]="'select' | translate"
[searchTotalRecordsLabel]="'total_records' | translate: {value: priceListSearchTotalRecords}"></comp>

每个属性和功能都很重要。并且每个组件仅更改每个属性和函数的名称的一部分，例如(onSelect)="priceListOnChange()" (onSelect)="companyListOnChange()"等。

某些页面包含10到20个这样的组件，使得HTML 1000行很难找到任何内容。

我想告知一个局部名称，并自动告知所有要组成的属性和功能。但是，如果我输入一个函数或属性，则应忽略模式并使用通知的内容。类似于partial属性：

<comp dataKey="priceListId" id="priceList"
name="priceList" formControlName="priceList" partial="priceList"

(onCompRequest)="differentRequest($event)"
[clearLabel]="'differentClearLabel' | translate"></comp>

唯一的解决方案是将组件封装到另一个组件中？

Answer 1

您可以重构组件以接受选项对象，而不是绑定每个属性。

<comp formControlName="priceList"  [options]="priceListOptions" />

和您班上的

priceListOptions = {
  dataKey: "priceListId",
  id: "priceList",
  name: "priceList",
  searchFields: this.priceListSearchFields,
  searchGridFields: this.priceListSearchGridFields,
  searchGridData: this.priceListSearchGridData,
  multiple: false,
  compSuggestions: this.priceListSuggestions,
  onCompRequest: this.priceListRequest,
  onSearchRequest: this.priceListSearchRequest,
  compDisplayField: "label",
  onClear: this.priceListOnChange,
  onSelect: this.priceListOnChange,
  searchTotalRecords: this.priceListSearchTotalRecords,
  searchTitle: "'priceListTitle' | translate", // <-- Change these to use ur translation service
  searchEmptyTitle: "'nothing_found' | translate",
  filterLabel: "'filter' | translate",
  clearLabel: "'clear' | translate",
  cancelLabel: "'cancel' | translate",
  selectLabel: "'select' | translate",
  searchTotalRecordsLabel: "'total_records' | translate: {value: priceListSearchTotalRecords}"
}

请注意，您必须将上述属性重构为可在类组件中处理的属性，例如手动调用管道或其对应的服务，并通过函数名称this.handler传递事件处理程序，而不是使用字符串形式的{ {1}}

属性名称和函数复合

1 个答案: