如何在 Angular 2 中的同一个组件中使用多个 ng-content？

Question

我想在我的组件中显示不同的模板。只有一个会显示。如果 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>

Answer 1

您可以将 ng-content 包裹在 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>

Plunker Example

另见

Angular 9 demo

如何在 Angular 2 中的同一个组件中使用多个 ng-content？

How to use multiple ng-content in the same component in Angular 2?

javascript

angular2-directives

angular2-template

angular