我想将自定义组件添加到离子导航栏中 . 该组件正在使用此模板：

<ion-buttons end>
  <button ion-button (click)="toggleLang()">{{lang | uppercase}}</button>
</ion-buttons>

在离子导航栏中添加我的组件时，它未对齐，如下面的屏幕截图所示：
enter image description here

该组件称为mc-lang-switcher，并以这种方式集成在ion-navbar中：

<ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MTL Metro Codes</ion-title>
    <mc-lang-switcher></mc-lang-switcher>
  </ion-navbar>

如果我直接在离子导航栏中添加组件的模板，我有预期的对齐方式：

<ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MTL Metro Codes</ion-title>
    <ion-buttons end>
      <button ion-button (click)="toggleLang()">EN</button>
    </ion-buttons>
  </ion-navbar>

enter image description here

什么是 ionic way 使这项工作？

ionic3