Question

我想在点击两行之间显示一些自定义组件/ html。我相信快速简便的解决方案是使用点击处理程序中的事件并直接操作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="..."，它编译得很好并且在运行时不会失败。

我应该从哪里开始编辑创建的mat-row元素中的DOM？

Answer 1

我之前对类似的东西有一个基本的要求，并设法根据讨论并在this thread上破坏了plunkr。

它基本上可以通过使用ComponentFactory创建自定义组件，然后使用@ViewChildren获取表行列表，然后单击选定的表行，将自定义组件插入到指定的{ {1}}使用@Input传递行数据：

<强>模板：

index

<强>组件：

<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;
    }
  }
}

我在StackBlitz here上创建了一个基本的工作演示。由于此功能尚未得到官方支持，因此以这种方式执行此操作可能最终会破坏该行，但Angular Material团队确实有类似的in the pipeline。

扩展MatRowDef

1 个答案: