如何在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