在Angular 2中如何检查<ng-content>是否为空？

Question

假设我有一个组件:

@Component({
    selector: 'MyContainer',
    template: `
    <div class="container">
        <!-- some html skipped -->
        <ng-content></ng-content>
        <span *ngIf="????">Display this if ng-content is empty!</span>
        <!-- some html skipped -->
    </div>`
})
export class MyContainer {
}

现在,如果<ng-content>此组件为空,我想显示一些默认内容.有没有直接访问DOM的简单方法？

Answer 1

包装ng-content一个HTML元素,如div获取对它的本地引用,然后将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>`

Answer 2

在@pixelbits答案中有一些缺失.我们不仅需要检查children属性,因为父模板中的任何换行符或空格都会导致children带有空白text\linebreaks的元素.更好地检查.innerHTML和.trim()它.

工作范例:

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

Answer 3

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

<div #content>Some Content</div>

并在您的组件类中使用@ContentChild（）获得对注入内容的引用

@ContentChild('content') content: ElementRef;

因此，在组件模板中，您可以检查content变量是否具有值

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

Answer 4

这是一个CSS解决方案.如果在ng-content中没有设置,则可以提供默认组件.因为他们是我的兄弟姐妹,所以可以像这样解决它.

^{从IE 9开始兼容,部分自IE7/8以来兼容:https://caniuse.com/#feat=css-sel3}

HTML

<div class="wrapper">
    <ng-content select="my-component"></ng-content>
</div>
<div class="default">
    This shows something default.
</div>

CSS

.wrapper:not(:empty) + .default {
    display: none;
}

Answer 5

2021 年 9 月

如果实现组件没有提供默认内容，还有另一种技术可以通过使用*ngTemplateOutlet指令来完成默认内容，这允许我们对自定义进行更多控制：

源组件中的示例：

import { Component, ContentChild, TemplateRef } from '@angular/core';
@Component({
  selector: 'feature-component',
  templateUrl: './feature-component.component.html',
})
export class FeatureComponent {
  @ContentChild('customTemplate') customTemplate: TemplateRef<any>;
}

然后在 HTML 模板中：

<ng-container
  [ngTemplateOutlet]="customTemplate || defaultTemplate"
></ng-container>

<ng-template #defaultTemplate>
  <div class="default">
    Default content...
  </div>
</ng-template>

目标组件：

<!-- default content -->

<feature-component></feature-component>


<!-- dynamic content -->

<feature-component>
  <ng-template #customTemplate>
    <div> Custom group items. </div>
  </ng-template>
</feature-component>

Answer 6

如果您想显示默认内容，为什么不使用 css 中的“only-child”选择器。

https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child

例如：HTML

<div>
  <ng-content></ng-content>
  <div class="default-content">I am default</div>
</div>

css

.default-content:not(:only-child) {
   display: none;
}

Answer 7

注入elementRef: ElementRef并检查是否elementRef.nativeElement有孩子.这可能只适用于encapsulation: ViewEncapsulation.Native.

包裹<ng-content>标签并检查它是否有孩子.这不起作用encapsulation: ViewEncapsulation.Native.

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

并检查它是否有孩子

@ViewChild('contentWrapper') contentWrapper;

ngAfterViewInit() {
  contentWrapper.nativeElement.childNodes...
}

(未测试)