angular - 嵌套组件的继承

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. 反过来，它会在被问到时将其返回给网格。这对于编辑器的每个实现都是相同的。

很想听听推荐的设计方法是什么。

标签： angulartypescriptag-grid