угловой 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/