Question

我的问题是检查是否在父组件中提供了与<some_selector>相关联的<ng-content select='some_selector'>。可能是我举例说明：

我们有父组件模板（editor.html）：

这是我的编辑

<modal>
    Some contents
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot>
</modal>

在模态组件模板（modal.html）中，我们想要使用这样的* ngIf语句：

<div class="modal>
    <div class="modal-body">
        <ng-content></ng-content>
    </div>
    <div class="modal-footer" *ngIf='hasNgContent("mfoot")' >
        <ng-content select="mfoot"></ng-content>
    </div>
</div>

如果在<mfoot>标记内的编辑器模板中使用了<modal>标记，我们不希望显示div.modal-footer。那么如何实现hasNgContent()方法呢？或者可能在angular2中有更多直接*ngIf语句，允许检测父组件标记中是否使用了<mfoot>标记。

Answer 1

您可以使用@ContentChildren执行此操作并查看集合的长度。类似的东西：

{{1}}

这将填充所有mfootComponents，因此您可以检查是否有任何mfootComponents。我希望它有所帮助。

Answer 2

我找到的解决方案有点脏，并且使用jQuery，但我没有看到任何其他问题框架（所以没有make标签cdef void order_spam(int tons)作为单独的组件）：

<mfoot>

Angular2检查/检测ng-content选择存在于父节点* ngIf语句中

2 个答案: