我对它有一些困惑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)