Angular 2隐形组件容器

Question

像<app-root></app-root>这样的容器可以打破css布局，尤其是在使用flexbox时。

是否可以使用隐形组件容器？我已经使用以下标记尝试了selector: '[app-root]'，但它们都创建了一个dom元素：

<template>, <ng-template>, <ng-template>, <ng-container>

如果确实需要这个容器，如果Angular只呈现HTML注释，那就太棒了。

Answer 1

我个人认为最好的方法是使用selector作为属性。例如，你有这样的@Component：

...
@Component({
    selector: '[your-component]'
})
...

这样，your-component是一个属性，您可以这样使用：

<div your-component>Some content...</div>

在这种情况下，保证样式不会中断。

PS 据我所知，此功能（Angular 1中的replace）在Angular 1中已弃用，因此它不是您对Angular 2的期望。

Answer 2

您可以在主机元素上使用display: contents，使其对Flexbox和网格布局不可见。元素确实出现在DOM中，但它不会干扰布局：它的子节点将遵循其祖父的布局规则。

不幸的是，display: contents目前仅在Firefox中可用，但支持会随着时间的推移而增长。 https://caniuse.com/#feat=css-display-contents