Question

我试图检查ng-content是否为空，所以我查看了this question并接受了接受的答案。

但是我没有得到理想的结果。

我设置一个名为#target的本地模板变量，然后访问其childNodes属性并检查其长度：

<header class="{{ns}}-dm-header">
    <button class="{{ns}}-dm-toggle" [ngClass]="{fluid: !target.childNodes.length}" (click)="toggle()">{{placeholder}}</button>

    // Checking to see the length
    <code>{{target.childNodes.length}}</code>

    <div class="{{ns}}-dm-content-target" #target>
      <ng-content select="[target]"></ng-content>
    </div>
</header>

这是渲染后#target包含的内容：

<div _ngcontent-mcb-3="" class="bch-dm-content-target"></div>

当我使用{{target.childNodes.length}}检查长度时，它表示#target的childNodes长度为2，尽管它是空的。

如果它是空的，它究竟是什么计数为childNodes，我该如何修复它？

Answer 1

如果你的HTML没有缩小/修剪，你的代码片段将包含由用于缩进/格式化的空格引起的文本节点

<div class="{{ns}}-dm-content-target" #target><ng-content select="[target]"></ng-content></div>

如果您想避免这种情况，请写下以下内容：

{{1}}

Angular 2将空div计为2个childNodes

1 个答案: