Question

我正在尝试使用PrimeNG的p-dataScroller构建一个通用列表组件，如下所示：

<div>
  <p-dataScroller [value]="items" ...more properties...>
    <template let-listItem>
      <div (click)="select(listItem)">
        <template [ngTemplateOutlet]="itemTemplate"
                  [ngOutletContext]="{'item': listItem, 'selected': listItem == selectedItem}"></template>
      </div>
    </template>
  </p-dataScroller>
</div>

p-dataScroller本身使用模板传播items数组中的每个项目 selectedItem和select()是相应通用列表组件的方法。在这个组件中，我声明itemTemplate像这样：

 @ContentChild(TemplateRef)
 public itemTemplate: TemplateRef<any>;

最后我以下列方式使用我的通用列表组件：

<generic-list [items]="someArray">
  <template>
    <list-item [itemType]="itemType">
      <template let-item>
        <i class ="fa" [ngClass]="{'fa-lock': item.visibility == 0,
                                   'fa-users': item.visibility == 1}"></i>
      </template>
    </list-item>
  </template>
</generic-list>

如您所见，模板组件（list-item）本身有另一个模板！首先，我想知道这是否存在问题（三个嵌套模板），但更重要的是，ngOutletContext中的值似乎没有添加到每个list-item。 { - 1}}和item输入参数都存在于list-item组件中，但似乎没有设置它们。在调试时，Angular 2正确地将list-item组件添加为列表条目，但抛出异常，因为它缺少selected中的item输入参数。有趣的是，AfterContentInit输入参数设置正确，可能是因为它不属于itemType。

我无法在通用列表组件模板中移动list-item组件，从而降低了复杂性，因为可以使用几种不同类型的项目（所有这些项目都有ngOutletContext，{{ 1}}等等。

如何使用其他模板中的值正确设置模板的item参数？

Answer 1

除

外，一切都正确

<generic-list [items]="someArray">
  <!-- had to declare the 'ngOutletContext' values here!! -->
  <template let-item-"item" let-selected="selected">
    <!-- makes using it here easy -->
    <list-item [item]="item" [selected]="selected" [itemType]="itemType">
      <template>
        ...
      </template>
    </list-item>
  </template>
</generic-list>

这真的很难找到。找不到关于此主题的任何文档。

Angular 2：使用ngTemplateOutlet和ngOutletContext的嵌套模板

1 个答案: