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