web-dev-qa-db-ja.com

Angular 2の同じコンポーネントで複数のng-contentを使用する方法？

コンポーネントに別のテンプレートを表示したいと思います。 1つだけが表示されます。 hasURLがtrueの場合、<a></a>。 hasURLがfalseの場合、<button></button>。

HasURLがfalseの場合の問題は、コンポーネント表示ボタンですが、ng-contentは空です。最初の「a></a>

それを解決する方法はありますか？

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

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

ありがとう！

javascriptangularangular2-templateangular2-directives
34
Steffi

ラップできますng-content in ng-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>

プランカーの例

こちらもご覧ください

59
yurzui