angular - 扩展MatRowDef

我想在单击时在两行之间显示一些自定义组件/html。我相信快速而简单的解决方案是使用click处理程序中的事件并直接操作dom，但是如果可能的话，我希望以角度的方式来操作。
为了获得灵感，我首先看了关于扩展结构指令的this article。但它的用途有限，因为*matRowDef不应该单独使用，而是与其他元素一起作为材质表的一部分使用。然后我直接看了一眼source code，试图模仿MatRowDef扩展CdkRowDef的方式，结果是：

@Directive({
  selector: '[expandableRowDef]',
  providers: [
    {provide: MatRowDef, useExisting: ExpandableRowDirective},
    {provide: CdkRowDef, useExisting: ExpandableRowDirective}
  ],
  inputs: ['columns: expandableRowDefColumns', 'when: expandableRowDefWhen']
})
export class ExpandableRowDirective<T> extends MatRowDef<T> {
  constructor(template: TemplateRef<any>,
              viewContainer: ViewContainerRef,
              _differs: IterableDiffers) {
                super(template, _differs);
              }
}

然后我简单地用*matRowDef="..."切换*expandableRowDef="..."，它编译得很好，并且在运行时不会失败。
我应该从这里把它带到哪里来编辑createdmat-row元素中的dom？

最佳答案

不久前，我对类似的东西有一个基本的要求，并根据讨论和this thread上的breakplunkr成功地将一些东西组合在一起。
它的工作原理是使用ComponentFactory创建自定义组件，然后使用@ViewChildren获取表行列表，单击选定的表行时，在指定的index处插入自定义组件，并使用@Input传入行数据：
模板：

<mat-row *matRowDef="let row; columns: displayedColumns; let index = index"
  (click)="insertComponent(index)"
  #tableRow
  matRipple>
</mat-row>

组件：

export class TableBasicExample {

  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

  @ViewChildren('tableRow', { read: ViewContainerRef }) rowContainers;
  expandedRow: number;

  constructor(private resolver: ComponentFactoryResolver) { }

  insertComponent(index: number) {
    if (this.expandedRow != null) {
      // clear old content
      this.rowContainers.toArray()[this.expandedRow].clear();
    }

    if (this.expandedRow === index) {
      this.expandedRow = null;
    } else {
      const container = this.rowContainers.toArray()[index];
      const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(InlineMessageComponent);
      const inlineComponent = container.createComponent(factory);

      inlineComponent.instance.user = this.dataSource.data[index].name;
      inlineComponent.instance.weight = this.dataSource.data[index].weight;
      this.expandedRow = index;
    }
  }
}

在行之间插入的自定义组件：

@Component({
  selector: 'app-inline-message',
  template: 'Name: {{ user }} | Progress {{ progress}}%',
  styles: [`...`]
})
export class InlineMessageComponent {
  @Input() user: string;
  @Input() weight: string;
}

我已经在stackblitzhere上创建了一个基本的工作演示。由于这个功能还没有得到官方的支持，以这种方式来完成它最终可能会导致崩溃，但是角度材料团队确实有一些类似的东西in the pipeline。