Angular 角度2+；-更干净的html，无需为组件元素添加附加标记

有没有一种方法可以避免为组件生成的标记，从而使我的输出干净且易于设置样式

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

这是我在模板中得到的html

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

------
------

将#组件转换为角度组件后，生成的html是

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

-------------
-------------

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

---

提前感谢

在您的AppComponent中，您可以忽略使用`id=“component”添加

div

，在父组件中，您可以直接将id分配给子组件

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

---

我希望我说得很清楚。

在您的AppComponent中，您可以忽略使用`id=“component”添加

div

，在父组件中，您可以直接将id分配给子组件

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

---

我希望我说得很清楚。

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

<app-container>
  <app-component>

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

在component.scss中

:host {
  background-color: indigo;
}

---

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

<app-container>
  <app-component>

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

在component.scss中

:host {
  background-color: indigo;
}