时间戳

首页 > 解决方案 > 渲染一个没有任何包装标签的角度模板

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

问题描述

我在这里陷入困境。致力于重构一堆相当混乱的 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 布局会完全中断。

标签： angulardomangular-template

解决方案

显然，此时的答案是否定的，Angular 不支持这一点并且总是需要一个父宿主元素。

这是一个问题，似乎其他人已要求通过此功能请求以角度修复此问题。

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

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

唉，这不是 Angular 支持的。

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

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

这（通过 CSS）完全符合我的要求。不幸的是，Safari 对此的支持有一些非常重要的警告，使其无法满足我的需求。

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

推荐阅读