动态创建ng-content选择器Angular

Question

我正在使用一个具有“平铺”组件的设计系统。该图块组件具有以下结构。

<tile-group>
  <tile>
    ...
  </tile>
</tile-group>

现在，我想将这些设计系统组件包装在应用程序组件中。 tile-group组件和tile组件必须是直接的父代和子代，因此我不能单独包装这些组件。

因此，包装器组件看起来像这样。

@Component({
  selector: 'app-tiles-wrapper',
  template: `
    <tile-group>
      <tile>
        ...
      </tile>
    </tile-group>
  `,
})
export class TilesWrapper  {
}

如果希望通过以下方式使用包装器组件，我会怎么想。

<app-tiles-wrapper>
  <div *ngFor="let tile of tiles; let i = index">
    This is the content of tile {{ i }}.
  </div>
</app-tiles-wrapper>

每个“ ngfor div”应放置在下一个图块中。这样。

<tile-group>
  <tile>
   <div>
    This is the content of tile 0.
  </div>
  </tile>
  <tile>
   <div>
    This is the content of tile 1.
   </div>
  </tile>
  ...
</tile-group>

这似乎是ng-content的工作，但我无法弄清楚如何为ng-content动态设置选择器。看起来像这样：

<tile-group>
  <tile *ngFor="let tile of tiles">
    <ng-content [dynamic-selector-name]></ng-content>
  </tile>
</tile-group>

但这不起作用。有谁知道如何做这样的事情？