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

Question

我想在我的组件中显示不同的模板。只有一个会显示。 如果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> 

谢谢！

Answer 1

可以在ng-template包裹ng-content和使用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