Angular 9组件中带*ngIf的ng-content无内容时如何显示默认值？

问题根源 #

你遇到的问题是因为：当父组件使用<div content *ngIf="false">时，Angular会在投影位置生成一个注释节点（用于标记*ngIf的绑定逻辑），导致ref.hasChildNodes()返回true，默认值的显示条件因此不成立，最终页面什么都不显示。

解决方案 #

不要依赖DOM节点的存在来判断，改用Angular的ContentChildren API检测是否有实际渲染的投影内容，既能避开注释节点的干扰，又能保留你用属性标记投影元素的需求。

1. 修改Inner组件的TypeScript代码 #

引入ContentChildren并查询所有带content属性的投影元素：

import { Component, ContentChildren, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'inner',
  templateUrl: './inner.component.html'
})
export class InnerComponent {
  // 查询所有带content属性的投影元素（包含后代元素）
  @ContentChildren('[content]', { descendants: true }) 
  projectedContent: QueryList<ElementRef>;
}

2. 修改Inner组件的模板 #

把默认值的显示条件替换为检查投影内容的数量，同时移除不必要的#ref变量：

<div>
    <ng-content select="[content]"></ng-content>
</div>
<ng-container *ngIf="projectedContent.length === 0">
    <div>Default value</div>
</ng-container>

效果验证 #

• 当父组件写<inner><div content *ngIf="false">Some content</div></inner>时，*ngIf条件不满足，投影元素不会被渲染，projectedContent长度为0，默认值正常显示。
• 当父组件写<inner><div content>Some content</div></inner>时，投影元素存在，projectedContent长度大于0，显示传入的内容。
• 当父组件写<inner></inner>时，projectedContent长度为0，显示默认值。

内容的提问来源于stack exchange，提问作者bruno.almeida