Angular 2 隐形组件容器答案

【问题标题】：Angular 2 invisible component containerAngular 2 隐形组件容器
【发布时间】：2023-03-26 19:20:01
【问题描述】：

<app-root></app-root> 之类的容器确实会破坏 css 布局，尤其是在使用 flexbox 时。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

P.S.据我所知，该功能（Angular 1 中的 replace）在 Angular 1 中已被弃用，因此您对 Angular 2 的期望不高。

【讨论】：

【解决方案2】：

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

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

【讨论】：