背景:在使用Swper封装一个组件时,碰到这样一种常见,使用*ngIf判断数据类型,如果为数组就去循环dom,如果不是就直接使用ng-template的ngTemplateOutlet去接收,但是碰到这样一个错误。
templateRef.createEmbeddedView is not a function
刚开始的写法
<div class="swiper-wrapper">
<ng-template *ngIf="isArrayItems; else itemsDom">
<div class="swiper-slide" *ngFor="let item of items">
<ng-template [ngTemplateOutlet]="item.item"></ng-template>
</div>
</ng-template>
<ng-template #itemsDom [ngTemplateOutlet]="items"></ng-template>
</div>
发现主要是由于
<ng-template #itemsDom [ngTemplateOutlet]="items"></ng-template> 这句的写法导致的,itemsDom直接使用了ngTemplateOutlet
需要在外层在包一层
<ng-template #itemsDom>
<ng-template [ngTemplateOutlet]="items"></ng-template>
</ng-template>
修改后的写法
<div class="swiper-wrapper" *ngIf="isArrayItems; else itemsDom">
<div class="swiper-slide" *ngFor="let item of items">
<ng-template [ngTemplateOutlet]="item.item"></ng-template>
</div>
</div>
<ng-template #itemsDom>
<div class="swiper-wrapper">
<ng-template [ngTemplateOutlet]="items"></ng-template>
</div>
</ng-template>