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

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

El problema si hasURL es false, el componente mostrar botón, pero el ng-content está vacío. Porque ya se lee 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!

Author: user93, 2017-06-22
Source

1 answers

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 Émbolo

Véase también

 36
Author: yurzui,
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-06-22 12:38:31