Javascript 在Angular 2中，如何检查<；天然气含量>；是空的吗？

假设我有一个组件：

@组件({
选择器：“MyContainer”，
模板：`
如果ng内容为空，则显示此内容！
`
})
出口级集装箱{
}

---

现在，如果此组件的

为空，我想显示一些默认内容。有没有一种不直接访问DOM的简单方法？

注入

elementRef:elementRef

并检查

elementRef.nativeElement

是否有子元素。这可能仅适用于

封装：ViewEncapsulation.Native

<div #contentWrapper>
  <ng-content></ng-content>
</div>

包装

标签并检查其是否有子项。这不适用于

封装：view封装.Native

<div #contentWrapper>
  <ng-content></ng-content>
</div>

---

（未测试）

注入

elementRef:elementRef

并检查

elementRef.nativeElement

是否有子元素。这可能仅适用于

封装：ViewEncapsulation.Native

<div #contentWrapper>
  <ng-content></ng-content>
</div>

包装

标签并检查其是否有子项。这不适用于

封装：view封装.Native

<div #contentWrapper>
  <ng-content></ng-content>
</div>

---

（未测试）

将

ng内容

包装在类似

div

的HTML元素中，以获取对其的本地引用，然后将

ngIf

表达式绑定到

ref.children.length==0

：

template: `<div #ref><ng-content></ng-content></div> 
           <span *ngIf="ref.nativeElement.childNodes.length == 0">
              Display this if ng-content is empty!
           </span>`

模板：`
如果ng内容为空，则显示此内容！
`

将

ng内容

包装在类似

div

的HTML元素中，以获取对其的本地引用，然后将

ngIf

表达式绑定到

ref.children.length==0

：

template: `<div #ref><ng-content></ng-content></div> 
           <span *ngIf="ref.nativeElement.childNodes.length == 0">
              Display this if ng-content is empty!
           </span>`

模板：`
如果ng内容为空，则显示此内容！
`

在@pixelbits答案中缺少一些内容。我们不仅需要检查

children

属性，因为父模板中的任何换行符或空格都将导致

children

元素出现空白文本\linebreak。 最好检查

.innerHTML

和

.trim（）

它

工作示例：

<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
    Content if empty
</span>

内容（如果为空）

在@pixelbits答案中缺少一些内容。我们不仅需要检查

children

属性，因为父模板中的任何换行符或空格都将导致

children

元素出现空白文本\linebreak。 最好检查

.innerHTML

和

.trim（）

它

工作示例：

<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
    Content if empty
</span>

内容（如果为空）

注入内容时，请添加一个参考变量：

<div #content>Some Content</div>

因此，在组件模板中，可以检查内容变量是否有值

<div>
  <ng-content></ng-content>
  <span *ngIf="!content">
    Display this if ng-content is empty!
  </span>    
</div> 

如果ng内容为空，则显示此内容！

注入内容时，请添加一个参考变量：

<div #content>Some Content</div>

因此，在组件模板中，可以检查内容变量是否有值

<div>
  <ng-content></ng-content>
  <span *ngIf="!content">
    Display this if ng-content is empty!
  </span>    
</div> 

如果ng内容为空，则显示此内容！

编辑17.03.2020

纯CSS（2个解决方案） 如果未向ng内容中投影任何内容，则提供默认内容

可能的选择器：

：唯一的子项

选择器。请看这里的帖子：

这一个需要更少的代码/标记。自IE 9以来的支持：

：空的

选择器。请进一步阅读

来自IE 9的支持，部分来自IE 7/8：

HTML

---

以防它不起作用

请注意，至少有一个空格被认为不是空的。 Angular会删除空格，但如果不是：

<div class="wrapper"><!--
    --><ng-content select="my-component"></ng-content><!--
--></div>

或

---

编辑17.03.2020

纯CSS（2个解决方案）
如果未向ng内容中投影任何内容，则提供默认内容

可能的选择器：
：唯一的子项
选择器。请看这里的帖子：

这一个需要更少的代码/标记。自IE 9以来的支持：


：空的
选择器。请进一步阅读

来自IE 9的支持，部分来自IE 7/8：


HTML

以防它不起作用

请注意，至少有一个空格被认为不是空的。
Angular会删除空格，但如果不是：

<div class="wrapper"><!--
    --><ng-content select="my-component"></ng-content><!--
--></div>



或

在我的情况下，我必须隐藏空ng内容的父项：

<span class="ml-1 wrapper">
  <ng-content>
  </ng-content>
</span>

在我的情况下，我必须隐藏空ng内容的父级：

<span class="ml-1 wrapper">
  <ng-content>
  </ng-content>
</span>

我使用@ContentChildrendecorator实现了一个解决方案，它在某种程度上与@Lerner的答案类似

据这位装饰师介绍：

从内容DOM获取元素或指令的查询列表。无论何时添加、删除或移动子元素，查询列表都将更新，并且查询列表的可观察更改将发出一个新值

因此，父组件中的必要代码为：

<app-my-component>
  <div #myComponentContent>
    This is my component content
  </div>
</app-my-component>

完整示例：
我使用@ContentChildrendecorator实现了一个解决方案，这在某种程度上类似于@Lerner的答案

据这位装饰师介绍：

从内容DOM获取元素或指令的查询列表。无论何时添加、删除或移动子元素，查询列表都将更新，并且查询列表的可观察更改将发出一个新值

因此，父组件中的必要代码为：

<app-my-component>
  <div #myComponentContent>
    This is my component content
  </div>
</app-my-component>

完整示例：
如果要显示默认内容，为什么不使用css中的“独生子女”选择器呢


例如：
HTML

如果您想显示默认内容，为什么不使用css中的“独生子女”选择器呢


例如：
HTML

对于角度10，它有轻微的变化。您可以使用：


如果ng内容为空，则显示此内容！
角度为10时，它略有变化。您可以使用：


如果ng内容为空，则显示此内容！
显示错误“ref”未声明。
下面是在Angular 11（可能是10 als）中工作的
.default-content:not(:only-child) {
   display: none;
}

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