html - Angular：检查是否提供了 ng-content 插槽之一

Question

我有包含多个ng-content元素的组件模板：

      <div class="form__general">
        <ng-content select="[general]"></ng-content>
      </div>

      <div class="form__footer">
        <ng-content select="[footer]"></ng-content>
      </div>

我如何检查是否提供了内部*ngIf条件#footer？

我尝试过这样的事情，但这不起作用：

      <div *ngIf="#footer" class="form__footer">
        <ng-content select="[footer]"></ng-content>
      </div>

Answer 1

从条件检查中删除#。

示例代码片段：

app.component.html

<h1 #footer>Welcome</h1>

<child-comp>
    <div *ngIf="footer.innerText === 'Welcome'" class="form__footer">
        Hi There
    </div>
</child-comp>

child.component.html

<ng-content select=".form__footer"></ng-content>