小编Paw*_*rma的帖子

在 *ngFor 的情况下,什么为 ngTemplate 提供上下文?

我对它有一些困惑ngTemplateOutletContext,特别是它如何传递给ngTemplate或谁将它传递给ngTemplate围绕所*ngFor应用的元素。当我将其与我们明确传递要渲染的方式进行比较时,混乱就产生了ngTemplate

这是我认为当我们显式传递模板时会发生的情况 -

假设我们有一个ngContainer// ngTemplate( Literally any HTML element as ngTemplateOutlet & ngTemplateOutletContext can be applied to any element)现在我们选择显式提供我们之前创建的模板。像这样 -

<ng-template #temp let-number>
  <p>{{number}}</p>
</ng-template>
Run Code Online (Sandbox Code Playgroud)

我们将它传递给我们已经应用的某个元素,ngTemplateOutlet就像ngTemplateOutletContext这样 -

<div [ngTemplateOutlet]="temp" [ngTemplateOutletContext]="{$implicit: 4}">
</div>
Run Code Online (Sandbox Code Playgroud)

(我们应该使用ng-container上述操作,因为它不会在 DOM 中,但这里与我无关。)

现在,temp ngTemplate将具有上下文div(或任何其他父容器)传递的上下文,如下所示 -

在此输入图像描述

我在这里理解的是,我们消除了传入的上下文ng-template中提供的内容。我们创建在模板本身中使用的局部变量。ngTemplateOutletngTemplateOutletContext


问题


当我们使用*ngFor像 -

<p *ngFor="let number of data">
  {{number}}
</p> …
Run Code Online (Sandbox Code Playgroud)

javascript angular2-directives ng-template ngfor angular

7
推荐指数
1
解决办法
6503
查看次数