渲染一个没有任何包装标签的角度模板答案

【问题标题】：Render an angular template without ANY wrapping tag渲染一个没有任何包装标签的角度模板
【发布时间】：2021-08-17 05:13:24
【问题描述】：

我在这里陷入困境。致力于重构一堆相当混乱的 Angular 组件及其模板的 HTML。

问题在于，在一种特殊情况下，我不能在 DOM 中拥有父元素。现在，模板选择器是这样设置的：

<thisComponent *nIf="blah" [someParam]="hello"><thisComponent>

在 DOM 中呈现这个：

 <thisComponent>
    <div>Hello</div>
    <div>World</div>
 <thisComponent>

这破坏了我们想要使用的 CSS，并与正在呈现的其余内容保持一致。

我想在没有父 thisComponent 元素的情况下进行上述工作。

我在想这样的事情可能会奏效：

<ng-container thisComponent *nIf="blah" [someParam]="hello"></ng-container>

（然后将选择器更改为属性选择器ala [thisComponent]）

但这似乎不起作用。

有没有办法在 DOM 中不渲染父元素的情况下完成上述操作？

更多上下文。还有另一个重复的问题建议使用属性选择器，但问题是您仍然需要父元素（带有属性）。理想情况下，角度将允许该父元素成为 ng-container，它不会呈现父元素。但这不受支持。

为什么需要这样做：

CSS 喜欢干净的 DOM 结构，一些特性完全依赖于它……即 flex 布局。当 flex 容器和 flex 对象之间有额外的 DOM 层时，Flex 布局会完全中断。

【问题讨论】：

【解决方案1】：

显然，目前的答案是不，Angular 不支持这个并且总是需要一个父宿主元素。

这是一个问题，似乎其他人已要求通过此feature request 以角度解决此问题。

读起来很有趣。常见的建议之一是获得我上面建议的角度支持，即使用 ng-container 作为宿主元素的能力：

<ng-container mySelector></ng-container>

唉，这不是 Angular 支持的。

上述功能请求讨论中的最佳解决方法建议可能是这个建议的 css 属性：

<app-my-component style="display: contents"></app-my-component>

这（通过 CSS）完全符合我的要求。不幸的是，Safari support for this has some pretty big caveats 使它无法满足我的需求。

在这一点上，我似乎需要放弃让 Angular 尊重特定的 DOM 结构，而是需要创建不同的 CSS 来处理我们试图组合在一起的布局。

【讨论】：