自定义结构指令创建太多元素

Question

我创建了我的自定义结构指令，该指令应该为传递的项目数组中的每个元素呈现主机元素：

@Directive({
selector: '[appItems]'
})
export class ItemsDirective implements OnInit, OnChanges {
@Input('appItemsOf')
items: any[];
constructor(private container: ViewContainerRef,
private template: TemplateRef<any>) {
}
ngOnInit(): void {
this.container.createEmbeddedView(this.template);
}
ngOnChanges(): void {
this.container.clear();
for (const item of this.items) {
if (item) {
this.container.createEmbeddedView(this.template, {
$implicit: item,
index: this.items.indexOf(item)
});
}
}
}
}

用法：

<div *appItems="let item of items">
Item: {{ item.name }}
</div>

不幸的是，打印：

Item: 1
Item: 2
Item: 3
Item:

最后一个元素正在创建和呈现，尽管项数组如下所示：

items = [
{
name: '1'
},
{
name: '2'
},
{
name: '3'
}
]

我创建了一个显示此问题的 https://stackblitz.com/edit/angular-qwatckstackblitz。

为什么会这样，应该如何正确完成？

Answer 1

目前，已完成以下操作：

1. 创建指令实例
2. 调用NgOnChanges
3. 调用NgOnInit

因此，基本上，一旦为集合创建了 N 个视图，就会在NgOninit期间再创建一个视图，从而在模板中生成 N+1 个嵌入式视图。

只需删除NgOnInit的内容。

Answer 2

你为什么要在ngOnInit中创建这个，因为这创造了额外的一个。注释此行后，多余的项目将消失。

ngOnInit(): void {
// this.container.createEmbeddedView(this.template);
}