相关疑难解决方法(0)

假设我有简单的Bootstrap面板组件,带有多个转换插槽.模板示例:

<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select="my-panel-heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select="my-panel-content"></ng-content>
  </div>
</div>

我想让panel-heading可选.<div class="panel-heading">如果没有提供内容,我如何隐藏元素<ng-content select="my-panel-heading"></ng-content>

我试图了解如何在a ng-content为空时创建if来显示.

<div #contentWrapper [hidden]="isOpen">
    <ng-content ></ng-content>
</div>

<span *ngIf="contentWrapper.childNodes.length == 0">
    <p>Display this if ng-content is empty!</p>
</span>

当内容为空时我尝试使用那个显示数据,但即使信息为空也不会显示<span>标签

谢谢,永远感谢你的帮助.

我只是从本教程中学习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>

说，我有一个在其模板中接受ng-content的组件：

但是我希望该组件显示一些默认内容作为后备，以防万一没有提供任何ng-content。是否可以使用* ngIf类型的指令来测试ng-content是否为空？