Angular条件内容投影：为何用div而非直接用ng-container？

我在学习Angular条件内容投影时，看到官方文档里的这段代码：

<div *ngIf="expanded" [id]="contentId">
    <ng-container [ngTemplateOutlet]="content.templateRef"></ng-container>
</div>

我不太理解这里为什么要用div标签，能不能直接把*ngIf指令和[id]属性绑定到ng-container上？

完全可以把*ngIf和[id]绑定到ng-container上，但得先明白官方用div的核心原因：

• 官方代码里的div是为了提供一个带id的真实DOM元素。如果业务场景需要这个id（比如锚点跳转、CSS选择器定位、第三方库依赖DOM节点id），div作为真实DOM节点能满足需求；而ng-container是Angular的虚拟容器，不会被渲染成真实HTML元素，绑定在它上面的[id]不会出现在最终页面的DOM结构里。
• 如果你的场景不需要这个id对应的真实DOM节点，直接把*ngIf移到ng-container上完全可行，甚至可以简化代码：

  <ng-container *ngIf="expanded" [ngTemplateOutlet]="content.templateRef"></ng-container>
  

  这里可以把两个ng-container合并，因为Angular会把*ngIf转换成内置的ng-template结构，和ngTemplateOutlet可以共存。
• 补充：如果确实需要id，但又不想多一个div标签，那得确保投影的内容本身有根元素，把id绑定到那个根元素上；如果投影内容没有根元素，还是需要一个真实容器（比如div、span）来承载id，否则id无法生效。

内容的提问来源于stack exchange，提问作者Melih