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

Question

我想在我的组件中显示不同的模板.只有一个会显示.如果hasURL是true,我想表明<a></a>.如果hasURL是false,我想表明<button></button>.

问题如果hasURL为false,组件显示按钮,但ng-content为空.因为它已经在第一篇中读到了"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示例

也可以看看

• 如何有条件地围绕ng-content包装div