Наследование для вложенных компонентов

Question

Я создаю сетку, используя ag-grid .Здесь я хочу создать собственные редакторы динамических ячеек.Которые показывают различные поля редактирования на основе значения внутри ячейки.Я получил идею от здесь .

Этот вопрос ориентирован на дизайн.Я хочу иметь несколько редакторов, каждый из которых имеет свои возвращаемые значения getValue() и isPopup().Эти методы используются библиотекой через ICellEditorComponent. Вот основной обзор дизайна .Теперь мне интересно, я использую наследование?И если да, могу ли я наследовать prop-editor в конкретные проекты, даже если он не абстрактный?Или я вместо этого создаю отдельный абстрактный класс, который в основном содержит эти методы, используемые во всех редакторах?Есть ли другой / лучший подход?

Вот код, который даст вам представление о том, на чем я спотыкаюсь.prop-editor.component.ts.

@Component({
  selector: "editor-cell",
  template: `
    <div #container tabindex="0">
      <span *ngIf="array">
        <app-prop-array-editor [params]="params.value"></app-prop-array-editor>
      </span>
    </div>
  `,
  styles: []
})
export class PropEditorComponent
  implements ICellEditorAngularComp, AfterViewInit {
  private array: boolean = true;

  private params: any;
  private isPopupValue: boolean;
  public stringValue: string;

  @ViewChild("container", { read: ViewContainerRef, static: true })
  public container;

  constructor() {}

  ngAfterViewInit() {
    this.container.element.nativeElement.focus();
  }

  // This will decide what component is displayed
  // by setting a value which will be used in *ngIf
  agInit(params: any): void {
    this.params = params;
    if (params.value is array) {

    } else {

    }
  }

  // return value from one of the editors
  getValue(): any {
    return this.stringValue;
  }

  // return value from one of the editors
  isPopup(): boolean {
    return true;
  }
}

И prop-array-editor.component.ts.В настоящее время он еще не закончен, но вопрос о наложении дизайна.

@Component({
  selector: "editor-cell",
  template: `
    <form [formGroup]="arrayForm">
      <removed because unnecessary for question>
    </form>
  `,
  styles: []
})
export class PropArrayEditorComponent {
  arrayForm: FormGroup;
  public stringValue: string;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
  }

  getValue(): any {
    return this.stringValue;
  }

  isPopup(): boolean {
    return true;
  }
}

Как вы можете видеть, он использует isPopup() и getValue(), которые должны давать правильное значение до prop-editor.Который, в свою очередь, вернет его обратно в сетку при запросе.Это будет одинаковым для каждой реализации редактора.

Хотелось бы услышать, каков рекомендуемый подход к проектированию.