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:

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

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

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

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

Answer 1

当前，已完成以下操作：

已创建指令实例
NgOnInit被调用
NgOninit被调用

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

只需删除$ docker run -it --name <containername> -v /c/Users:/myVolData <imagename>的内容。

Answer 2

为什么要在ngOnInit中创建它，因为这会创建多余的一个。评论此行后，多余的项目将消失。

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

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

2 个答案: