कोणीय 2 में एक ही घटक में एकाधिक एनजी-सामग्री का उपयोग कैसे करें?

Question

मैं अपने घटक में अलग-अलग टेम्पलेट प्रदर्शित करना चाहता हूं। केवल एक दिखाएगा। यदि hasURLtrue है, तो मैं <a></a> दिखाना चाहता हूं। यदि hasURLfalse है, तो मैं <button></button> दिखाना चाहता हूं।

समस्या है अगर हैरल गलत है, घटक शो बटन, लेकिन एनजी-सामग्री खाली है। क्योंकि यह पहले से ही पहली "में पढ़ा है 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-contentng-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