Как использовать несколько ng-содержимого в одном компоненте в Angular 2?

Я хотел бы отобразить в моем компоненте другой шаблон. Покажет только один. Если hasURL - true, я хочу показать <a></a>. Если hasURL - false, я хочу показать <button></button>.

Проблема, если hasURL - false, кнопка отображения компонента, но содержимое ng пусто. Поскольку он уже читается в первом "a></a>

Есть ли способ решить это, пожалуйста?

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

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

Спасибо!

Ответ 1

Вы можете обернуть ng-content в ng-template и использовать 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>

Пример плунжера

См. также

Как условно обернуть div вокруг ng-контента

Ответ 2

Я вижу только один нг контента в шаблоне