角度5:templateRef.createEmbeddedView不是函数

问题描述

这是我要开始使用的代码(角度5):

Here's the code I'm trying to get to work (angular 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)错误，并且不太了解原因.

The problem is that I've got this (templateRef.createEmbeddedView is not a function) error and don't really understand why.

此代码基于此示例 https://netbasal.com/angular-2 -understanding-viewcontainerref-acc183f3b682 ，所以我认为它应该可以工作.

This code is based on this example https://netbasal.com/angular-2-understanding-viewcontainerref-acc183f3b682 so I guess it should work.

我在做什么错了?

推荐答案

根据角度5更新日志:

因此，您应该使用ng-template而不是template:

So you should use ng-template instead of template:

<ng-template #tpl>
   <h1>ViewContainerRef</h1>
</ng-template>

Stackblitz示例

Stackblitz Example

或将enableLegacyTemplate设置为true:

platformBrowserDynamic().bootstrapModule(AppModule, { enableLegacyTemplate: true })

Stackblitz示例

Stackblitz Example

但是你应该知道

选项enableLegacyTemplate和<template>元素都将在Angular v6中删除.

The option enableLegacyTemplate and the <template> element will both be removed in Angular v6.

这篇关于角度5:templateRef.createEmbeddedView不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！