NgTemplateOutlet

[deepthan]

NgTemplateOutlet

官网介绍 | 源码

代码示例

<ng-container *ngTemplateOutlet="eng; context: {$implicit: 'World', detail: '我来了!'}"></ng-container>

<ng-template #eng let-data let-detail="detail"><span>Hello {{data}}! {{ detail }}</span></ng-template>

作用

将一个ng-template包裹的模板插入到宿主元素中。

参数

• ngTemplateOutlet: TemplateRef | null
  第一个参数是需要传入的模板

• ngTemplateOutletContext: Object | null
  第二个参数是需要传入的数据。形式如

 {$implicit: 'World', detail: '我来了!'}

它是一个对象格式上下文的数据，$implicit的数据可以通过let-data获取到，data是用户可以自定义的名称。其他的数据需要通过let-xxx="xxx"来获取，如detail是通过let-detail="detail", {{ detail }}。

一块内容如何在代码中使用两次？

<ng-container *ngIf="show">
  <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
  deepthan
</ng-container>

<ng-container *ngIf="!show">
  <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
  momomo
</ng-container>

<ng-template #contentTpl>你好,</ng-template>