如何利用 let-* 和 ngTemplateOutlet 进行角度动态列表答案

【问题标题】：How to make use of let-* and ngTemplateOutlet to make dynamic listing in angular如何利用 let-* 和 ngTemplateOutlet 进行角度动态列表
【发布时间】：2020-10-18 13:42:45
【问题描述】：

我正在研究 ngTemplateOutlet 的概念来制作动态列表系统。

 <app-dynamic-list [items]="items">
    <ng-template let-item>
      {{ item.id }} - {{ item.names.en }} ({{ item.names.np }})
    </ng-template>
 </app-dynamic-list>

这里的let-item 应该是items 的一个实例。我应该在组件级别做什么才能得到这样的。我在 stackoverflow 中阅读了一些帖子，但无法明确概念（因为它们有静态 templateRef - 而我不想拥有静态 templateRef）。

What is let-* in Angular 2 templates?

Using $implict to pass multiple parameters

类似的代码模式被用于 - https://www.npmjs.com/package/ng-sortable

【问题讨论】：

标签： angular ngtemplateoutlet

【解决方案1】：

为了创建动态列表，使用@ContentChild 指令访问投影内容。因此，当它们被投影时，应该使用“CONTEXT”作为 HOST ||调用它们的父组件。

app-dynamic-list -> .ts 文件

  @Input()
  items: Array<any>;

  @ContentChild('listItem', {static: false})
  dynamicListTemplate: TemplateRef<any>;

app-dynamic-list -> .html 文件

     <ng-container *ngFor="let item of items;">
        <ng-container
            [ngTemplateOutlet]="listItem" 
            [ngTemplateOutletContext]="{ item: item}">
        </ng-container>
      </<ng-container

因此，当内容从父组件投影出来并且项目作为@Input 传递时。迭代每个项目并在 item 键中传递项目对象，在这种情况下这将是一个对象，并且将使用 ng-template 中的 let-item 访问该项目。

注意： 确保@ContentChild('listItem'...) 名称应与父组件标签中定义的#listItem 匹配。因此，将在 [ngTemplateOutlet]="listItem" 中传递相同的模板引用，以告诉 Angular 动态渲染哪个模板，因为主机或子组件中可以存在多个模板。

<app-dynamic-list [items]="items">
// ContentChild Projected inside `app-dynamic-list` component
    <ng-template #listItem let-item>
      {{ item.id }} - {{ item.names.en }} ({{ item.names.np }})
    </ng-template>
 </app-dynamic-list>

【讨论】：

我正在尝试上述解决方案。我收到错误 - Identifier 'listItem' is not defined.。我在 Angular 9 中这样做