Angular 5无法从放置在列表中的项目的指令中获取ng-template内部的指令

Question

我正在尝试创建一个可重复使用的列表，每个项目都有一个可选的“grip”指令

请参阅此Plunker

https://plnkr.co/edit/AaKbi4bOUO3gNJ0xEeJc?p=preview

@Directive({
  selector: '[grip]'
})
export class Grip { }

@Directive({
  selector:'[item]'
})
export class ListItem{

  @ContentChild(Grip) grip: Grip; <-- UNDEFINED
}

@Component({
  selector:'[list]',
  template: `
  <div item *ngFor="let item of items"
    [ngTemplateOutlet]="template"
    [ngTemplateOutletContext]="{ item: item }">
 </div>
 `
})
export class List{

  @ContentChild(TemplateRef) template: TemplateRef<any>;
  @Input() items: any[]
}

使用

<div list [items]="[0,1,2]">
  <ng-template let-item="item">
    <span grip>#</span>
    <span>{{item}}</span>
  </ng-template>
</div>

看起来像是在创建最里面的指令，但ListItem中的ContentChild没有被连接