Question

简化：

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

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

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

它与this.viewContainerRef.createEmbeddedView

一起使用

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

显然我已经添加了

  @Input()
  num : number = 0;

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

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

问题

似乎我试图通过两个方向来做这件事：

1）模板的上下文
2）@input变量

但没有效果。（我没有看到数字）。

如何设置自己的号码（上下文|| @input）？

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 });

Answer 2

Okey所以我会这样做：

您将模板作为内容发送给您的卡组件。 ng-template
在您的卡组件中，您可以使用@ContentChild
使用ng-container和[ngTemplateOutlet]在您的卡组件中呈现模板
获取输入＆＃34; num＆＃34;模板可以使用[ngTemplateOutletContext]并将变量$implicit设置为num，（$ implicit允许您使用let-yourVaiableName在模板上使用任何变量名称）
在您的模板上添加let-num以获取对模板上下文变量的引用
使用{{num}}

希望这会有所帮助：）

很抱歉无法使代码内联工作：/