如何从div内部引用ng-template？

Question

我的ng容器在div内，因此我无法访问ng模板。有办法吗？

<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