web-dev-qa-db-fra.com

Comment utiliser plusieurs contenus ng dans le même composant dans Angular 2?

Je voudrais afficher un modèle différent dans mon composant. Un seul apparaîtra. Si hasURL est true, je veux montrer le <a></a>. Si hasURL est false, je veux montrer le <button></button>.

Le problème si hasURL est faux, le bouton afficher le composant, mais le contenu ng est vide. Parce qu'il est déjà lu dans le premier "a></a>

Existe-t-il un moyen de résoudre ce problème, s'il vous plaît?

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

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

Merci!

javascriptangularangular2-templateangular2-directives
34
Steffi

Vous pouvez envelopper ng-content dans ng-template et utilisez 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>

Exemple Plunker

Voir également

59
yurzui