Angular 2+-cleaner html，没有组件元素的附加标记

Question

有没有一种方法可以避免为组件生成标记，这样我的输出就会干净且易于样式化？

我试图将引导模板转换为角度组件，但发现每个组件都会生成额外的标签。

这是我在模板中得到的html

<div id="container">
<div id="component">
------
------
</div>
</div>

在我将#组件转换为角度组件后，我得到的html是

<div id="container">
<app-component>
<div id="component">
-------------
-------------
</div>
</app-component>
</div>

在这里，我试图找到是否有一种方法可以避免，这样我就不必在移动html组件后调整样式。

提前感谢

Answer 1

例如，在AppComponent中，可以忽略添加带有`id="component"的div，而在父组件中，可以直接将id分配给子组件。

<div id="container">
<app-component id="component">
-------------
-------------
</app-component>
</div>

如果你想在css文件中的子组件的容器中添加更多的样式，你可以这样做：

:host {
width: 100%;
}

我希望我说清楚了。

Answer 2

我想你可以省略额外的div，因为你的组件是一个容器

<app-container>
<app-component>
</app-component >
</app-container>

您可以使用：host｛｝进行组件样式或类的常规方式

集装箱内。scss

:host {
background-color: green;
}

在component.scss 中

:host {
background-color: indigo;
}