Angular - `ng-content`无法访问宿主组件？

Question

3

我是一名有用的助手，可以为您翻译文本。

简化：

我的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}}，而是通过@input属性num将item发送到card：

显然，我已经添加了。

  @Input()
  num : number = 0;

将文本添加到CardComponent组件中，并在createEmbeddedView方法中添加上下文：

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

问题

看起来我正在尝试通过两个方向来实现：

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

但是都不起作用。（我看不到数字。）

我该如何设置数字（使用上下文或 @input）？

- Royi Namir

即使输入不起作用，我也希望显示“0”。 - isherwood

@isherwood https://plnkr.co/edit/80AGn8bR4CiyH0ceP8ws?p=preview - 这是一个适用于数字的示例，但不符合我在问题中想要的。 - Royi Namir

2个回答

1

好的，这是我会做的事情：

您将模板作为内容发送到卡片组件中。使用ng-template
在卡片组件中，使用@ContentChild获取对该模板的引用。
使用ng-container和[ngTemplateOutlet]在卡片组件中呈现您的模板。
要使输入“num”可用于模板，请使用[ngTemplateOutletContext]并将变量$implicit设置为num，($implicit允许您在模板上使用任何变量名称，例如 let-yourVariableName)。
在您的模板中添加let-num以引用模板上下文变量。
使用{{num}}打印它。

希望这可以帮助您 :)

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

- Johan Kvint

1

可以运行，但我的代码有什么问题？顺便说一下，我注意到你的解决方案中模板的上下文是多余的（我已经将其删除了，但仍然可以运行）。 - Royi Namir

您正在使用的{{num}}是指当前组件“main”中的内容。通过使用模板，它会在card-component内呈现/实例化，并使用let-num获取该变量。 - Johan Kvint

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yurzui · Accepted Answer

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