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

Question

我刚刚从本教程中学习Transluction 在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

从 Angular 10 开始，以下工作：

<div #ref><ng-content></ng-content></div>
<ng-container *ngIf="!ref.hasChildNodes()">
   Default 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>