javascript - parametros - ¿Cómo usar múltiples contenidos ng en el mismo componente en Angular 2?

pasar datos de un componente a otro angular 2

Question

Me gustaría mostrar una plantilla diferente en mi componente. Sólo uno se mostrará. Si hasURL es true , quiero mostrar <a></a> . Si hasURL es false , quiero mostrar el <button></button> .

El problema si hasURL es falso, el componente muestra el botón, pero el contenido ng está vacío. Porque ya está leído en la primera " a></a>

¿Hay alguna manera de resolver eso por favor?

        <a class="bouton" href="{{ href }}" *ngIf="hasURL">
            <ng-content>
            </ng-content>
        </a>

        <button class="bouton" *ngIf="!hasURL">
            <ng-content>
            </ng-content>    
        </button>

¡Gracias!

Answer 1

Puede envolver ng-content en ng-template y usar ngTemplateOutlet

<a class="bouton" href="{{ href }}" *ngIf="hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</a>

<button class="bouton" *ngIf="!hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container> 
</button>
<ng-template #contentTpl><ng-content></ng-content></ng-template>

Ejemplo de Plunker

Ver también

• Cómo envolver condicionalmente una división alrededor de contenido ng