渲染没有任何包装标签的角度模板

Question

我在这里陷入困境。致力于重构一堆相当混乱的角度组件及其模板的 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 中不渲染父元素的情况下完成上述操作？

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

为什么需要这个：

CSS 喜欢干净的 DOM 结构，并且某些功能完全依赖于它......即 Flex 布局。当 Flex 容器和 Flex 对象之间存在额外的 DOM 层时，Flex 布局会完全崩溃。

Answer 1

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

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

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

唉，这不是 Angular 支持的。

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

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

这（通过 CSS）正是我正在寻找的。不幸的是，Safari对此的支持有一些相当大的警告，使其无法满足我的需求。

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