动态如何在单击的表单元格中创建组件

Question

some.component.html

<table>
  <tr *ngfor="let row in table">
    <td *ngFor="let cell in row" (click)="onCellClick($event)">Cell Text</td>
  </tr>
</table>

@Component({
  selector: 'app-my-component',
  template: '<div>My Component</div>',
})
export class MyComponent { }


@Component({
  selector: 'app-some',
  templateUrl: './some.component.html'
})
export class SomeComponent {
  public table = [[1, 2, 3], [4, 5, 6]];

  constructor(
    private viewContainerRef: ViewContainerRef
  ) { }

  onCellClick(event: MouseEvent): void {
    const myComponent = this.viewContainerRef.createComponent(MyComponent);
  }
}

此代码在＆lt;/table＆gt;之后添加myComponent。但是我需要在单击的表单元格中创建myComponent（内部td）。我该怎么做？

Answer 1

注意：此无工厂版本仅在每行中都有相同数量的单元格（因为我们使用CellsPerrow来猜测单元格的索引）：

好的，首先导入所有我们需要的东西：

import {
       Component,
       OnInit,
       ViewContainerRef,
       QueryList,
       ViewChildren,
} from '@angular/core';

添加ViewChildren Decorator在构造函数下方以获取所有单元格的元素：

@ViewChildren('cellElem', { read: ViewContainerRef })cellsElemsList: QueryList<ViewContainerRef>;

添加一个cellperrow常数：

private cellPerRow = 3;

然后像这样修改您的oncellClick：

onCellClick = (rowIdx, colIdx) => {
    const cellIdx = (rowIdx * this.cellPerRow) + colIdx;
    this.cellsElemsList
      .filter((el, idx) => idx === cellIdx)[0]
      .createComponent(TestComponent);
  };

最后，更改HTML以将当前单元格的索引传递到OnCellClick（）（并添加未来组件的容器，#cellelem，#cellelem，#cellelem，#cellelem， TD Elem）：

<div *ngFor="let row of rows; let rowIdx = index;">
    <td *ngFor="let cell of row; let colIdx = index" (click)="onCellClick(rowIdx, colIdx)">
        <div #cellElem></div>
        Click me
    </td>
</div>