代码之家 › 专栏 › 技术社区 › DA.

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

angular-template dom angular

1

DA. · 技术社区 · 5 年前

我现在左右为难。正在重构一堆杂乱无章的角度组件及其模板的HTML。

<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>

(然后将选择器更改为属性选择器。) [thisComponent] )

但这似乎不起作用。

有没有一种方法可以在不使用DOM中的父元素渲染的情况下实现上述功能?

更多的背景。还有一个重复的问题建议使用属性选择器,但关键是您仍然需要一个父元素(带有属性)。理想情况下,angular将允许父元素成为ng容器,而不是呈现父元素。但这是不受支持的。

为什么需要这样做:

0 回复 | 直到 5 年前

1

0

DA. 5 年前

显然,目前的答案是 不,Angular不支持此功能,并且始终需要父宿主元素 .

这是一个问题,似乎其他人已经要求通过这个解决这个问题 feature request .

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

唉,这可不是什么好东西。

从上面的功能请求讨论中,最好的解决建议可能是这个建议的css属性:

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

这(通过CSS)正是我想要的。不幸地 Safari support for this has some pretty big caveats 让它不能满足我的需要。

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