背景:在使用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>