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

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.两者item和selected输入参数都存在于list-item组件中,但似乎没有设置它们.在调试时,Angular 2正确地将list-item组件添加为列表条目,但抛出异常,因为它缺少item输入参数AfterContentInit.有趣的是,itemType输入参数设置正确,可能是因为它不属于ngOutletContext.

我不能移动列表项组件的通用列表组件模板内,降低了复杂性,因为有几种不同类型的可以使用的物品(所有这些都具有item,selected等).

如何@Input()使用另一个模板中的值正确设置模板的参数？

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>

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