如何从 div 中引用 ng-template？

Question

我的 ng-containers 在 div 中，所以我无法访问 ng-template。有办法吗？

<div>     
  <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
</div>

<div>     
  <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
</div>

<ng-template #myTemplate></ng-template>

Answer 1

您的代码应该可以正常工作，如果您想传递上下文，您可以像这样使用 ngTemplateOutletContext：

<div>     
  <ng-container *ngTemplateOutlet="myTemplate; context: context1"></ng-container>
</div>

<div>     
  <ng-container *ngTemplateOutlet="myTemplate; context: context2"></ng-container>
</div>

<ng-template let-person #myTemplate>
  Template goes here
  {{person.name}}
</ng-template>

export class AppComponent  {
  name = 'Angular';
  context1 = {$implicit: {name: 'Marcos'}};
  context2 = {$implicit: {name: 'Beccari'}};
}

勾选这个demo

如何从 div 中引用 ng-template？

How to reference a ng-template from inside a div?

angular

ng-template