使用自定义组件时内联样式更改

Question

我有一个Ionic应用程序，在带有标签的所有页面上都有一个永久标题。

<ion-header>

  <ion-navbar>
    <ion-title>
      <span>
        Home
      </span>
      <button ion-button icon-only small round [navPush]="createHuntsPage" ><ion-icon item-right name="add"></ion-icon></button>
      <button ion-button icon-only small round [navPush]="profilePage" ><ion-icon item-right name="person"></ion-icon></button>
    </ion-title>
  </ion-navbar>

</ion-header>

而不是我创建了一个具有相同模板的自定义组件，并将其添加为选择器my-header。

@Component({
  selector: 'my-header',
  templateUrl: 'header.html'
})
export class HeaderComponent {
  constructor() {  }
}

然后在我的模板中添加<my-header>。一切都很好，除了一个小问题。第一种方法添加了一个内联样式属性，当我使用自定义组件时，该属性会丢失。

  

没有自定义组件

<div class="scroll-content" style="margin-top: 56px; margin-bottom: 56px;">

  

使用自定义组件

<div class="scroll-content" style="margin-bottom: 56px;">

为什么会这样？这种方法有什么问题吗？我可以通过添加margin-top: 56px;来解决这个问题但是我想知道为什么会发生这种情况？我有底部的标签，如果这与此有关。