组件包装器搞砸了HTML

Question

我有一个使用我的自定义按钮组件的父组件。

它看起来像：

parent.component.html：

<div class = "classes" >
   <my-button [input] = "input">
   </my-button>
</div>

my-button.component.html：

<button class = "input">
</button>

渲染后的dom看起来像这样：

<div class = "classes">
   <my-button>
       <button class = "input">
       </button>
   </my-button>
</div>

我相信包装组件“ my-button”在DOM中的事实正在弄乱它的外观。这个包装的目的是什么？为什么Angular不仅仅渲染组件的模板？

我如何这样获得它：

<div class = "classes">
   <button class = "input">
   </button>
</div>

我已经看到，您显然可以将button设置为属性，但是还有其他选择吗？我希望其他人能够轻松使用此my-button组件，并将其设置为属性会使事情复杂化。