javascript - Angular - `ng-content` 无权访问主机？

Question

简化:

我的 app-root 元素有这个模板:

 <div *ngFor="let item of [1,2,3,4,5,6]">
      <card *appDelay="100 * item" [num]="item">
        {{item}}
      </card>
    </div>

它使用结构指令来完成所有工作。

Plunker : The appDelay create dynamic component with a delay + sequentials numbers.

它使用 this.viewContainerRef.createEmbeddedView

但现在(出于学习目的)我希望不使用{{item}}，而是将item发送到card 通过名为 num 的 @input 属性:

显然我已经添加了

  @Input()
  num : number = 0;

到 CardComponent 组件并且还向 createEmbeddedView 方法添加了上下文:

 this.viewContainerRef.createEmbeddedView(this.templateRef,{$implicit: {num: time} });

问题

看来我正试图通过两个方向来做到这一点:

1) 模板上下文
2) @input 变量

但没有一个有效。 (我没有看到数字)。

我如何自己设置数字 (context || @input)？

Plunker

Answer 1

<card *appDelay="500 * item; let num">
   {{num}}
</card>

等价于

<ng-template [appDelay]="500 * item" let-num="$implicit">
  <card>
       {{num}}
  </card>
</ng-template>

和内部指令

this.viewContainerRef.createEmbeddedView(this.templateRef,{$implicit:time/500 });

Plunker Example