угловой 5: templateRef.createEmbeddedView не является функцией
Вот код, который я пытаюсь получить на работу (угловой 5):
import { Component, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';
@Component({
selector: 'vcr',
template: '
<template #tpl>
<h1>ViewContainerRef</h1>
</template>
<div>Some element</div>
<div #container></div>
',
})
export class VcrCmp {
@ViewChild('container', { read: ViewContainerRef }) _vcr;
@ViewChild('tpl') tpl: TemplateRef<any>;
constructor(
private viewContainerRef: ViewContainerRef
) {
}
ngAfterViewInit() {
console.info(this.viewContainerRef);
console.info(this._vcr);
this._vcr.createEmbeddedView(this.tpl);
this.viewContainerRef.createEmbeddedView(this.tpl);
}
}
Проблема в том, что я получил это (templateRef.createEmbeddedView is not a function
) и не понимаю, почему.
Этот код основан на этом примере https://netbasal.com/angular-2-understanding-viewcontainerref-acc183f3b682, поэтому я думаю, он должен работать.
Что я делаю неправильно?
Ответы
Ответ 1
Согласно угловому изменению 5:
Опция компилятора enableLegacyTemplate теперь по умолчанию отключена как элемент устарел начиная с v4. Используйте <ng-template>
вместо этого.
Поэтому вы должны использовать ng-template
вместо template
:
<ng-template #tpl>
<h1>ViewContainerRef</h1>
</ng-template>
Пример Stackblitz
или установите enableLegacyTemplate
на true
:
platformBrowserDynamic().bootstrapModule(AppModule, { enableLegacyTemplate: true })
Пример Stackblitz
Но вы должны знать, что
Опция enableLegacyTemplate и элемент <template>
будут удалены в Angular v6.
Ответ 2
В моем случае ошибка была вызвана тем, что я забыл * (звездочка) перед ngTemplateOutlet
Ответ 3
Когда вы ссылаетесь в * ngIf, else clause может быть произвольным компонентом, но он должен быть ng-шаблоном.
Например, например,
в компоненте, где у вас есть исходный код, подобный этому:
<div *ngIf="myCondition ; else elseSection">
<!-- ... -->
</div>
<div #elseSection>
<!-- ... -->
</div>
Полученный исходный код должен выглядеть следующим образом:
<div *ngIf="myCondition ; else elseSection">
<!-- ... -->
</div>
<ng-template #elseSection>
<!-- ... -->
</ng-template>
ref: https://techoverflow.net/2018/02/17/how-to-fix-angular-typeerror-templateref-createembeddedview-is-not-a-function/