Làm thế nào để sử dụng nhiều ng-nội dung trong cùng một thành phần trong Angular 2?

Question

Tôi muốn hiển thị mẫu khác trong thành phần của mình. Chỉ một người sẽ hiển thị. Nếu hasURL là true, tôi muốn hiển thị số <a></a>. Nếu hasURL là false, tôi muốn hiển thị số <button></button>.

Sự cố nếu hasURL là sai, nút hiển thị thành phần, nhưng nội dung ng trống. Bởi vì nó đã được đọc trong lần đầu tiên "a></a>

Có cách nào để giải quyết mà lòng?

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

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

Cảm ơn!

Answer 1

Bạn có thể quấn ng-content trong ng-template và sử dụng 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

cũng Xem

• How to conditionally wrap a div around ng-content