Cómo envolver condicionalmente un div alrededor de ng-content

Question

Cómo envolver condicionalmente un div alrededor de ng-content

Dependiendo del valor de una variable de clase (booleana) me gustaría que mi ng-content esté envuelto en un div o no esté envuelto en div (es decir, el div ni siquiera debería estar en el DOM)... ¿Cuál es la mejor manera de hacer esto ? Tengo un Plunker que intenta hacer esto, en lo que asumí que era la forma más obvia, usando ngIf .. pero no está funcionando... Muestra el contenido solo para uno de los valores booleanos pero no para el otro

Amablemente ayudar Gracias ¡tú!

Http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8

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

   <div *ngIf="insideRedDiv" style="display: inline; border: 1px red solid">
      <ng-content *ngIf="insideRedDiv"  ></ng-content> 
   </div>

   <ng-content *ngIf="!insideRedDiv"></ng-content>     

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


@Component({
  template: `
    <my-component> ... "Here is the Content"  ... </my-component>
  `
})
export class App {}

24

angular angular-ng-if angular2-ngcontent

Author: Somo, 2017-01-11

Source

3 answers

Recuerde que puede poner toda esta lógica en un componente separado! (basado en la respuesta de yurzui):

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

@Component({
    selector: 'div-wrapper',
    template: `
    <div *ngIf="wrap; else unwrapped">
      <ng-content *ngTemplateOutlet="unwrapped">
      </ng-content>
    </div>
    <ng-template #unwrapped>
      <ng-content>
      </ng-content>
    </ng-template>
    `,
})
export class ConditionalDivComponent {
  @Input()
  public wrap = false;
}

Puedes usarlo así:

<div-wrapper [wrap]="'true'">
 Hello world!        
</div-wrapper>

3

Author: charlie_pl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-04 06:20:27

Revisé esto y encontré un problema abierto sobre el tema de múltiples transclusiones con la etiqueta. Esto le impide definir varias etiquetas en un solo archivo de plantilla.

Esto explica por qué el contenido se muestra correctamente solo cuando se elimina la otra etiqueta en el ejemplo de plunker.

Puede ver el tema abierto aquí: https://github.com/angular/angular/issues/7795

2

Author: Jolmari,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-11 15:13:57

score 47 · Accepted Answer

Angular ^4

Como solución alternativa puedo ofrecerle la siguiente solución:

<div *ngIf="insideRedDiv; else elseTpl" style="display: inline; border: 1px red solid">
  <ng-container *ngTemplateOutlet="elseTpl"></ng-container>
</div>

<ng-template #elseTpl><ng-content></ng-content> </ng-template>

Ejemplo de émbolo angular v4

Angular

Aquí puede crear una directiva dedicada que hará las mismas cosas:

<div *ngIf4="insideRedDiv; else elseTpl" style="display: inline; border: 1px red solid">
   <ng-container *ngTemplateOutlet="elseTpl"></ng-container>
</div>

<template #elseTpl><ng-content></ng-content></template>

Ejemplo de Émbolo

NgIf4.ts

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

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

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

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

  @Input()
  set ngIf4Else(templateRef: TemplateRef<NgIfContext>) {
    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);
      }
    }
  }
}