Question

我想在我的组件中显示不同的模板。只有一个会显示。如果hasURL为true，我想显示<a></a>。如果hasURL为false，我想显示<button></button>。

问题如果hasURL为false，组件显示按钮，但ng-content为空。因为它已在第一个＆＃34; a></a>

中读取

有没有办法解决这个问题？

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

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

谢谢！

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

<强> Plunker Example

另见

How to conditionally wrap a div around ng-content

如何在Angular 2中的同一组件中使用多个ng-content？

1 个答案: