web-dev-qa-db-fra.com

angular 5: templateRef.createEmbeddedView n'est pas une fonction

Voici le code que j'essaye de mettre au travail (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);
  }
}

Le problème est que j'ai ceci (templateRef.createEmbeddedView is not a function) erreur et ne comprends pas vraiment pourquoi.

Ce code est basé sur cet exemple https://netbasal.com/angular-2-understanding-viewcontainerref-acc183f3b682 donc je suppose que cela devrait fonctionner.

Qu'est-ce que je fais mal?

angularangular2-template
22
k102

Selon angular 5 changelog:

L'option enableLegacyTemplate du compilateur est maintenant désactivée par défaut car l'élément est obsolète depuis la v4. Utilisez <ng-template> À la place.

Donc, vous devriez utiliser ng-template Au lieu de template:

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

exemple Stackblitz

ou définissez enableLegacyTemplate sur false:

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

exemple Stackblitz

Mais tu devrais savoir que

L'option enableLegacyTemplate et l'élément <template> Seront tous deux supprimés dans Angular v6.

52
yurzui

Dans mon cas, l'erreur était due à mon oubli * (astérisque) avant ngTemplateOutlet

21
Maxim Krabov

Lorsque vous référencez dans la * ngIf, la clause else ne peut pas être un composant quelconque, mais ce doit être un ng-template.

Pour, par exemple,

dans un composant où vous avez un code source similaire à ceci:

<div *ngIf="myCondition ; else elseSection">
    <!-- ... -->
</div>
<div #elseSection>
    <!-- ... -->
</div>

Le code source résultant devrait ressembler à ceci:

<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/

9
Monami J