angular - change - Cómo envolver condicionalmente una división alrededor de contenido ng

page title angular 4

Question

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

ayuda amablemente gracias!

Plunker

@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 {}

Answer 1

Angular ^ 4

Como solución le puedo ofrecer 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>

Plunker Ejemplo angular v4

Angular <4

Aquí puede crear directivas dedicadas que harán lo mismo:

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

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);
}
}
}
}

Answer 2

¡Recuerda que puedes 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>

Answer 3

Verifiqué esto y encontré un problema abierto sobre el tema de las 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 la otra etiqueta se elimina en su ejemplo de plunker.

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