Comment envelopper conditionnellement une div autour du ng-content

Question

En fonction de la valeur d'une variable de classe (booléenne), je voudrais que mon ng-content soit soit enveloppé dans un div, soit ne soit pas enveloppé dans un div (c'est-à-dire que le div ne devrait même pas être dans le DOM) ... Quelle est la meilleure façon de procéder ? J'ai un Plunker qui essaie de le faire, de la manière la plus évidente que j'ai supposée, en utilisant ngIf .. mais cela ne fonctionne pas... Il affiche du contenu uniquement pour une des valeurs booléennes mais pas pour l'autre

veuillez aider Merci !

http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8

@Component({
  selector: 'my-component',
  template: `

  `,
})
export class MyComponent {
  insideRedDiv: boolean = true;
}

@Component({
  template: `
     ... "Voici le contenu"  ... 
  `
})
export class App {}

Answer 1

Angular ^4

En guise de solution temporaire, je peux vous proposer la solution suivante :

Exemple Plunker angular v4

Angular < 4

Ici, vous pouvez créer une directive dédiée qui fera la même chose :

Exemple Plunker

ngIf4.ts

class NgIfContext { public $implicit: any = null; }

@Directive({ selector: '[ngIf4]' })
export class NgIf4 {
  private context: NgIfContext = new NgIfContext();
  private elseTemplateRef: TemplateRef;
  private elseViewRef: EmbeddedViewRef;
  private viewRef: EmbeddedViewRef;

  constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef) { }

  @Input()
  set ngIf4(condition: any) {
    this.context.$implicit = condition;
    this._updateView();
  }

  @Input()
  set ngIf4Else(templateRef: TemplateRef) {
    this.elseTemplateRef = templateRef;
    this.elseViewRef = null;
    this._updateView();
  }

  private _updateView() {
    if (this.context.$implicit) {
      this.viewContainer.clear();
      this.elseViewRef = null;

      if (this.templateRef) {
        this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef, this.context);
      }
    } else {
      if (this.elseViewRef) return;

      this.viewContainer.clear();
      this.viewRef = null;

      if (this.elseTemplateRef) {
        this.elseViewRef = this.viewContainer.createEmbeddedView(this.elseTemplateRef, this.context);
      }
    }
  }
}

Answer 2

N'oubliez pas que vous pouvez mettre toute cette logique dans un composant séparé! (basé sur la réponse de yurzui):

import { Component, Input } from '@angular/core';

@Component({
    selector: 'div-wrapper',
    template: `

    `,
})
export class ConditionalDivComponent {
  @Input()
  public wrap = false;
}

Vous pouvez ensuite l'utiliser comme ceci:

 Bonjour tout le monde!

Answer 3

J'ai vérifié cela et j'ai trouvé un problème ouvert sur le sujet des multiples insertions avec la balise ng-template. Cela vous empêche de définir plusieurs balises dans un seul fichier de modèle.

Cela explique pourquoi le contenu est affiché correctement uniquement lorsque l'autre balise ng-template est supprimée dans votre exemple plunker.

Vous pouvez consulter le problème ouvert ici: https://github.com/angular/angular/issues/7795