是否可以将默认值设置为<ng-content>

Question

我只是从本教程中学习Transluctionin 的用法angular2：

https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

我可以将<ng-content>标记用于某些内容，例如：

<ng-content select="[my-block-header]"></ng-content>

它位于my-block附加选择器的组件中。

它将来自其他组件的内容呈现为：

<my-block>
    <div class="box-header" my-block-header> <--added the slot selector here
        <h3 class="box-title">
            My title
        </h3>
    </div>
</my-block>

问题是：

<ng-content>如果我们没有传递任何值，是否可以将默认值添加到可以使用的块中？

到目前为止，如果没有传递任何值，则该位置将出现空白页。

编辑：

当我尝试测试时，有一个较新的版本zone.js不允许显示正确的错误，因此我得到的错误为：

Cannot set property 'stack' of undefined ; Zone: <root> ; 
Task: Promise.then ; Value: TypeError: Cannot set property 'stack' of undefined

但是，当我改变的版本zone.js到0.7.2错误控制台作为清楚地提到：

zone.js:392 Unhandled Promise rejection: Template parse errors:
<ng-content> element cannot have content.

因此，它确认没有任何默认值设置为 <ng-content>

Answer 1

从角度 10 开始，以下工作有效：

<div #ref><ng-content></ng-content></div>
<ng-container *ngIf="!ref.hasChildNodes()">
   Default Content
</ng-container>

它只是意味着，如果 divref没有任何子节点（即为ng-content空），则渲染ng-container具有“默认内容”。

Answer 2

只需使用：

<ng-content #myBlockHeader select="[my-block-header]"></ng-content>
<div *ngIf="!myBlockHeader">Default Content</div>

Answer 3

如果您在标签内添加一些标记会怎么样<ng-content>？

<ng-content select="[my-block-header]">
  <p>Some default markup here</p>
</ng-content>