如何利用let-*和ngTemplateOutlet 在角度中制作动态列表

Question

我正在研究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中阅读了一些帖子，但无法明确概念(因为他们有静态模板参考 - 我不想有静态模板参考(。

什么是 Angular 2 模板中的 let-*？

使用 $implict 传递多个参数

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

Answer 1

为了创建动态列表，使用@ContentChild指令访问投影内容。因此，当它们被投影时，"上下文"应该作为主机使用||从调用它们的父组件。

应用动态列表 -> .ts 文件

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

应用程序动态列表 -> .html 文件

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

因此，当内容从父组件投影并且项目作为@Input传递时。迭代每个项目并在项目键中传递项目对象，在这种情况下，该项目将是一个对象，并且将使用 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>