如何检查<ng含量>是否为空？（在Angular 2+到现在）纯 CSS （2 解决方案）

javascript angular

2022-08-30 04:29:52

假设我有一个组件：

@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 {
}

现在，如果此组件为空，我想显示一些默认内容。有没有一种简单的方法可以在不直接访问DOM的情况下执行此操作？<ng-content>

答案 1

包装在 HTML 元素中，如 a 以获取对它的本地引用，然后将表达式绑定到：ng-contentdivngIfref.children.length == 0

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

针对 Angular 12 进行了更新;旧的逻辑（“”）给出了错误，就像现在一样。ref.nativeElement.childNodes.lengthnativeElementundefined

答案 2

编辑 17.03.2020

纯 CSS （2 解决方案）

如果未将任何内容投影到 ng 内容中，则提供默认内容。

可能的选择器：

:only-child选择器。在这里看到这篇文章：：独生子选择器

^{这个需要较少的代码/标记。自IE 9以来的支持：我可以使用：只有孩子吗}
:empty选择器。请继续阅读。

^{从 IE 9 开始，部分自 IE 7/8 以来的支持：https://caniuse.com/#feat=css-sel3}

断续器

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

断续器

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

如果它不起作用

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

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

或

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