如何在不使用@Input 选项的情况下使用自定义配置制作 Angular 组件通用？

Question

你好angular社区，

我想问一个使图标组件通用并避免代码重复的好方法

删除图标组件：

@Component({
  selector: 'app-delete-row-icon',
  template: `
    <style>
      button {
        background-color: Transparent;
        border: none;
        cursor: pointer;
        overflow: hidden;
        outline: none;
      }

      mat-icon {
        font-size: 18px;
      }
    </style>
    <button (click)="onClickDeleteIcon($event)">
      <mat-icon
        matTooltip="Unselect file"
        matTooltipPosition="below"
        class="material-icons-outlined"
        >{{ iconRegistry.REMOVE }}</mat-icon
      >
    </button>
  `,
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DeleteRowIconComponent implements ICellRendererAngularComp {
  params;
  disabled = false;
  iconRegistry = IconRegistry;

  agInit(params): void {
    this.refresh(params);
  }

  refresh(params): boolean {
    this.params = params;
    return true;
  }

  onClickDeleteIcon($event): void {
    const params = {
      rowData: this.params.data,
      rowIndex: this.params.rowIndex
    };
    this.params.onClick(params);
  }

删除图标组件：

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { IconRegistry } from '../../../icon-registry/icon-registry';

@Component({
  selector: 'app-remove-icon-render',
  template: `
    <style>
      button {
        background-color: Transparent;
        border: none;
        cursor: pointer;
        overflow: hidden;
        outline: none;
      }
      button :hover {
        background-color: #efeadf;
      }
      mat-icon {
        font-size: 18px;
      }
    </style>
    <button
      *ngIf="params?.data && !!params.data.objectId && !!params.data.objectPath"
      (click)="onClick($event)"
      [disabled]="params?.disabledGetter ? params.disabledGetter(params) : false"
      data-cy="icon-cell-Delete"
    >
      <mat-icon [matTooltip]="tooltip" matTooltipPosition="below" class="material-icons-outlined">
        {{ iconRegistry.MINUS }}
      </mat-icon>
    </button>
  `,
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class RemoveIconRenderComponent implements ICellRendererAngularComp {
  params;
  iconRegistry = IconRegistry;
  tooltip: string;

  agInit(params): void {
    this.params = params;
    if (this.params?.tooltipGetter) {
      this.tooltip = this.params.tooltipGetter(this.params);
    } else {
      this.tooltip = this.params?.tooltip;
    }
  }

  onClick($event): void {
    $event.stopPropagation();
    const params = {
      rowData: this.params.node.data
    };
    this.params.onClick(params);
  }

  refresh(params): boolean {
    this.params = params;
    return true;
  }

唯一的区别是 ICON 和 agInit 背后的逻辑agInit

我不能使用 @Input 功能，因为我将在 ts 代码中使用这些组件，而不是 HTML 代码，这样：

  this.frameworkComponents = {
      deleteButtonRenderer: DeleteIconRenderComponent
    };

那么有什么好的推荐方法可以制作一个可以接受任何图标的通用组件吗？

Answer 1

您可以创建一个抽象的 RowIconComponent 并从中扩展。 像这样：

export abstract class IconComponent {
  params;
  iconRegistry = IconRegistry;
  tooltip: string;

  refresh(params): boolean {
    this.params = params;
    return true;
  }

  abstract onClick($event): void;
  abstract agInit(params): void;
}

并更改了示例：

@Component({
  // ...
})
export class DeleteRowIconComponent extends IconComponent implements ICellRendererAngularComp {
  agInit(params): void {
    this.refresh(params);
  }

  onClick($event): void {
    const params = {
      rowData: this.params.data,
      rowIndex: this.params.rowIndex
    };
    this.params.onClick(params);
  }
}